React Router v4 renders multiple routes

Question

I'm creating an SPA and I'm trying to setup Routing in the application using the react-router-dom package version 4.1.1.

My Route Definition is below:

<BrowserRouter> <div> <Route exact path="/" component={Login} /> <Route path="/login" component={Login} /> <Route path="404" component={NotFound} /> <Route path="*" component={NotFound} /> </div> </BrowserRouter>

Basically, I want to setup routing so that any request to a page for which no route is defined goes to the {NotFound} component.

How can this be achieved? The solution above renders both the Login and the NotFound component when requesting the /login page.

Kind regards

GuCier · Accepted Answer · 2021-03-12 14:51:58Z

31

here's an example from official tutorial, how to avoid rendering multiple routes

import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>

edited Mar 12, 2021 at 14:51

GuCier

7,4851 gold badge32 silver badges40 bronze badges

answered May 16, 2017 at 7:04

Taras Yaremkiv

3,6008 gold badges34 silver badges56 bronze badges

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

3 Comments

Nitin Kumar Over a year ago

<Switch> <Route exact path="/" component={Home} /> <Switch> <Route exact path="/child" component={Child} /> </Switch> // Default Route - FAILS <Route path="*" Component={NotFound404} /> </Switch>

Switch inside Switch is failing to load the Default Route.. Any idea on how to achieve the default Route when using switch inside switch?

Nitin Kumar Over a year ago

Sorry for the formatting. I am unable to beautify it in comments

Taras Yaremkiv Over a year ago

@NitinKumar

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

according to official docs, so avoid using nested switches

Shubham Khatri · Accepted Answer · 2019-01-21 09:55:14Z

Make use of Switch to render the first match of the route, You need to import Switch before using

import {Switch} from 'react-router'; <BrowserRouter> <Switch> <Route exact path="/" component={Login} /> <Route path="/login" component={Login} /> <Route path="404" component={NotFound} /> <Route path="*" component={NotFound} /> </Switch> </BrowserRouter>

According to the docs

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

Now, if we’re at /login, <Switch> will start looking for a matching <Route>. <Route path="/login"/> will match and <Switch> will stop looking for matches and render <Login>. otherwise route matches /login with /login and * and renders both the routes

However, when using Switch the order of Routes matter, make sure that you are adding the prefix Routes after the other Routes. For e.g. '/home' must be after '/' in the Route order or else, you could make use of the exact prop

 <Switch> <Route exact path="/" component={Login} /> <Route path="/home" component={Home} /> </Switch>

is not good solution. when go to /login from / then Login component Unmount and mount and is not good for performence

Serg · Accepted Answer · 2017-05-16 07:07:51Z

I think NotFound page is rendered because of <Route path="*" component={NotFound} /> rule. Path property of the Router accepts Any valid URL path that path-to-regexp understands. So '*' means zero or more parameter matches

Collectives™ on Stack Overflow

React Router v4 renders multiple routes

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related