Manually access a route with react router and a spring boot backend

I have a react UI that opens a new tab to another UI's sub route.

Example: a button in localhost/app1 opens a new tab to localhost/app2/usersettings - This works in a development scenario but once I roll out the applications as package, it fails. The issue is, that it just redirects me back to localhost/apps2

Here's my setup

@Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addRedirectViewController("/","index.html");
        registry.addRedirectViewController("/usersettings","index.html?path=usersettings");
        registry.addRedirectViewController("/{x:[\\w\\-]+}","index.html");
        registry.addRedirectViewController("/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}", "index.html");
    }

const MainPage = () => {
    return (
        <Box>
            <CssBaseline/>
            <Routes>
                <Route path="/" element={<HomePage/>}/>
                <Route path="index.html" element={<Navigate to="/"/>}/>
                <Route path="/usersettings" element={<UserSettings/>}/>
            </Routes>
        </Box>
    );
};

Navigating to /usersettings in app2 works perfectly if I click the route, but once I manually enter the url or redirect by a button from app1 it just loads the home route.

How am I supposed to setup the routes so router receives the correct path variable?

I am totally lost.

Thanks

Alrighty, first of all you need to configure your server to serve the correct index.html file for all routes that should be handled by your React application, as I told. for that purpose, you maybe should do this by setting up a catch-all route that serves the index.html file for any unrecognized routes.

let me explain it for you with an example :

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addRedirectViewController("/", "index.html");
    registry.addRedirectViewController("/{x:^(?!api$).*$}/**", "index.html");
}

it should allow your React application to handle all routes correctly, including routes that are opened in a new tab or redirected from app1.

and in your React application,you can then set up your routes like this:

const MainPage = () => {
    return (
        <Box>
            <CssBaseline/>
            <Routes>
                <Route path="/" element={<HomePage/>}/>
                <Route path="/usersettings" element={<UserSettings/>}/>
                <Route path="*" element={<Navigate to="/"/>}/>
            </Routes>
        </Box>
    );
};

as you see,configuration sets up a catch-all route that redirects to the home page for any unrecognized routes and it ensures that all routes are handled correctly by your React application

good luck bro !