React Router: Excluding a route from root path [duplicate] - reactjs

Question

This question already has answers here:
How to create a protected route with react-router-dom?
(5 answers)
Closed 5 months ago.
I'm currently setting up basic authentication for my React app. I have an AppWithAuth class which wraps the normal App, and a Login page. My goal is to redirect to /login when a user is not authenticated, but allow them to visit any other route if they are, such as / (dashboard path), /users, etc.
The problem I have is that the app wishes to render the root directory, but will redirect to the Login if not Authenticated. But since the login route is included in the root directory render, the app endlessly redirects. Any way to achieve the desired effect? Here's the gist of my code:
App:
class App extends React.Component {
render() {
return (
<Router> {/* The main routes of the app, e.g. /users... */}
...
</Router>
)
}
}
AppWithAuth:
class AppWithAuth extends React.Component {
isAuthenticated = () => {
// suppose this returns true if user is authenticated, false otherwise
}
render() {
return (
<Router>
<Route path='login' component={Login} />
<Route path='/' render={props => {
return this.isAuthenticated ? (
<App />
) : (
<Redirect to='/login' />
)
}} />
</Router>
)
}
}

Answer 1

If you use Switch then you can match paths exclusively. In that case order matters - the first path to match will break the switch, just like the switch statement. You can also leverage exact attribute to match a path exactly if you need to. For example:
<Router>
<Switch>
<Route exact path="/login" component={Login} />
<Route
path="/"
render={props => {
return this.isAuthenticated ? (
<App />
) : (
<Redirect to="/login" />
);
}}
/>
<Route path="/home" component={App} />
</Switch>
</Router>

Answer 2

what about try to this?
make ProtectedRoute for authenticated users
export default ({ isAuthenticated, component: C, ...rest }) => {
if (isAuthenticated) {
<Route {...rest} render={props => <C {...props} />} />
} else {
return <Redirect to="/login" />
}
}
use Router, Route in App.js
import ProtectedRoute from './ProtectedRoute'
class App extends React.Component {
isAuthenticated = () => {
// suppose this returns true if user is authenticated, false otherwise
}
render() {
return (
<Router>
<Route path='login' component={Login} />
<ProtectedRoute path='/' component={Main} isAuthenticated={this.isAuthenticated()} />
</Router>
)
}
}
The ProtectedRoute is only accept for authenticated users any others redirect to /login