How to set correctly React routes?

Question

I'm building an app with React and I'm using React routes.

I have 3 main routes:

If the user is logged in, show Dashboard
If the user is not logged in, show SignIn page
If the user clicks on ForgotPassword on the SignIn page, change url and show ForgotPassword page

index.js

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <div>
                    <Switch>
                        <Route path="/" component={App} />
                        <Route path="/login" component={Login} />
                        <Route path="/forgotPassword" component={ForgotPassword} />
                    </Switch>
                </div>
            </Suspense>
        </BrowserRouter>
    </Provider>,
  document.getElementById('root')
);

App.js

{this.props.location.pathname === "/" && <Dashboard />}
<Route exact path="/users" component={Users} />
<Route path="/users/:id" component={UserPage} />
{!authenticated && <Redirect to="/login" />}

When I try to open "/", it redirects to "/login" but it doesn't render Login component.
When I replace {!authenticated && <Redirect to="/login" />} with {!authenticated && <Login>} it renders the component properly, but it doesn't change the url and it won't show the ForgotPassword page.

How do I set this properly?

Did you tried <Route exact path="/" component={App} /> with exact in all routes? — Giovanni Esposito
– Giovanni Esposito, Commented Aug 2, 2021 at 9:44

AKX · Accepted Answer · 2021-08-02 09:46:20Z

1

You'll need to reorder your switch:

<Switch>
    <Route path="/login" component={Login} />
    <Route path="/forgotPassword" component={ForgotPassword} />
    <Route path="/" component={App} />
</Switch>

Then, maybe make that App something like

{!authenticated ? <Redirect to="/login" /> : (
  <Switch>
    <Route path="/users/:id" component={UserPage} />
    <Route exact path="/users" component={Users} />
    <Route path="/" component={Dashboard />
  </Switch>
)}

(though it could be simpler to just keep all routes in the top-level router/switch)

answered Aug 2, 2021 at 9:46

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yousaf · Accepted Answer · 2021-08-02 10:02:50Z

Problem is order of the Route components and the use of Switch component.

When you redirect to /login, Switch will render the first matching route; for the /login route, / route also matches.

This is why Login component isn't rendered. App component is rendered for both / and /login routes.

Solution

Couple of solutions to this problem are described below:

exact prop

One way to solve the problem is to use the exact prop. This will ensure that / route doesn't matches /login BUT it will cause another problem: nested routes inside App component won't be rendered. This is because for nested route to be rendered, parent route also needs to be rendered.

Re-order the Route components

Another solution is to change the order of your routes as:

<Switch>
   <Route path="/login" component={Login} />
   <Route path="/forgotPassword" component={ForgotPassword} />
   <Route path="/" component={App} />
</Switch>

Youness · Accepted Answer · 2021-08-02 09:52:23Z

0

You have to use render prop instead of component and the render prop give you the ability to do some checks and return the appropriate component

<Route render={(props) => !isAuth ? <Redirect to='/signin' /> : <Component {...props} /> } />

answered Aug 2, 2021 at 9:52

Youness

11 silver badge

Collectives™ on Stack Overflow

How to set correctly React routes?

3 Answers 3

Comments

Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related