Authentication with React Router and Spring Security - reactjs

Question

I am building a full stack application with React and Spring Boot, but came across one problem that I didn't find an answer anywhere.
The behavior that I am trying to achieve is as follows:
If a user wants to visit login or register page, I want to redirect user to the home page if they are authenticated. The isAuthenticated is a flag in redux that I set when the app first loads.
I also want to redirect user to the login page if they are not authenticated and tries to visit home page.
The first goal works fine as there are plenty of tutorials out there explaining how to use react-router to achieve that, but the first goal seems not to work properly in production.
I have a Spring Boot application running as a REST API on the backend, and I am using eirslett/frontend-maven-plugin to package both my front and backend into a single jar for deployment.
When I spin-up both front and backend separately as two development servers locally, the app will redirect me to the login page if I am not logged in (if I try to access secured routes by react-router). However, it will give me an error 401 page if I went directly to the /login route when not authenticated, but it will not give me error if I try to visit the home route and gets redirected to /login. Therefore, even if I got redirected to the /login just fine, I can't refresh the page or it will give me error 401.
The root component of my React front end looks like this, which utilizes React-router:
function App() {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<div className='AppContainer'>
<Navbar />
<Switch>
<PublicRoute path='/login' component={Login} />
<PublicRoute path='/register' component={Register} />
<PrivateRoute path='/' component={Todos} />
</Switch>
</div>
</ConnectedRouter>
</Provider>
);
}
export default App;
The PublicRoute and PrivateRoute component that I used looks as follow:
function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
return (
<Route
{...rest}
render={props =>
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: '/login', state: { from: props.location } }}
/>
)
}
></Route>
);
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps)(PrivateRoute);
function PublicRoute({ component: Component, isAuthenticated, ...rest }) {
return (
<Route
{...rest}
render={props =>
isAuthenticated ? (
<Redirect to={{ pathname: '/', state: { from: props.location } }} />
) : (
<Component {...props} />
)
}
></Route>
);
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps)(PublicRoute);
Does anyone have any idea what is going on? I feel like the problem exists because of the way I configured my PublicRoute component and Spring Security, but I don't know how to make them work together. Or, to my naive understanding, my frontend application will only load if I first visit my root route therefore it will redirect me to /login just fine; but if the first page I visit is /login, the root component of React will not load and therefore this route is secured by my Spring Security configuration. But is there a way to get around with that?
Any help is appreciated!

Answer 1

I figured it out by realizing that I am using BrowserRouter instead of a HashRouter, and that is why I am getting 401 and 404. The react-router documentation actually provides a great explanation on why should use a HashRouter here.