React Router with redirection to login page but also to have 404 NotFound route

Question

I created app that redirects user to login page, and if he logged in than he can access other routs of the site that are defined in Home component. The problem is I cannot now add NotFound route. Here is my code

    <BrowserRouter basename="/">
                <main>
                    <Switch>
                        <Route exact path="/login"
                            render={(props) => <Login {...props} setLoggedIn={() => this.setLoggedIn()}/>}/>
                        <Route  path="/" render={(props) => (
                            this.state.isAdminLogin ? (
                                <Home {...props} />
                            ) : (
                                <Redirect to="/login"/>
                            )
                        )}/>
                       <Route component={NotFound} />
                    </Switch>
                </main>
            </BrowserRouter>

When i open not existing route it still shows home page...

The problem is that you have a Switch component and a Route with path='/' before the not found route which will always match and either Redirect or render Home component. You need to refactor your code a bit to write PrivateRoute HOC + a NotFoundRoute functionality — Shubham Khatri, Oct 15 '18 at 07:47
The group of guys who downvoted all my questions yesterday - you just prevent developers to find answers, so thats not only stupid but egoistic — Anna, Oct 24 '18 at 10:39
I am not sure what caused the one person to downvote, since you question seems valid and has a proper code for others to help you — Shubham Khatri, Oct 24 '18 at 10:54

score 1 · Answer 1 · answered Oct 15 '18 at 07:48

1

You need a pattern in order for the route to be matched.

<Route path="*" component={NotFound} />

For this to work, make sure not any routes before it are matched, like in your example.

answered Oct 15 '18 at 07:48

Webber

4,672
4
29
38

score 1 · Accepted Answer · answered Oct 15 '18 at 07:53

The problem in your case is that you have a Switch component which renders a Route with path='/' before the NotFound route which will always match and either Redirect or render Home component, thus the control never reaches the NotFound Route.

You need to refactor your code a bit to write PrivateRoute HOC. Refer to this link to implement a PrivateRoute component and use it for all the Routes that you want to authenticate and then for a non matching Route render the 404 Route

React Router with redirection to login page but also to have 404 NotFound route

2 Answers2