React-Router 4 default route content displays on all other components

Question

I am learning react and trying to set up routes with react-router-dom. All the routes are working except the default route. The content of the default route component displays on all other components when i navigate to their routes. here is the code and the output below

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import One from './one';
import Two from './two';
import Three from './three';
import FourOFour from './404';

import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
    <div>
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
    </div>
</BrowserRouter>, 
document.getElementById('root')
);
registerServiceWorker();

see https://reacttraining.com/react-router/web/api/Switch and the example on the right - it will pick the first match. — Dimitar Christoff, Feb 26 '18 at 16:38
It worked, i just had to import Switch from react-router-dom. Thank you. Please can you provide me with a link to a tutorial apart from the documentation for react 16 so i can learn from there. Thank you — David Essien, Feb 26 '18 at 16:50

Aaqib · Answer 1 · 2018-02-26T16:57:01.090

First thing you need to make use of <Switch> and wrap it around your <Routes>

As described in Here

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

Firstly to make sure import Switch in your file like this:

import { Switch, Route } from 'react-router'

  <Switch>
    <Route exact={true} path="/" component={App}></Route>
    <Route path="/One" component={One}></Route>
    <Route path="/Two" component={Two}></Route>
    <Route path="/Three" component={Three}></Route>
    <Route path="*" component={FourOFour}></Route>
  <Switch>

So your code should be like :

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route } from 'react-router'; // Note this extra line
import './index.css';
import App from './App';
import One from './one';
import Two from './two';
import Three from './three';
import FourOFour from './404';

import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
      <Switch> // Note this extra Line
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
  <Switch>
</BrowserRouter>, 
document.getElementById('root')
);
registerServiceWorker();

You can read more about <Switch > Here

Oh, the sweet karma! Since you are doing 10s of edits, remove the `
` wrap and just leave the `` :) — Dimitar Christoff, Feb 26 '18 at 16:46
Thanks for pointing out in right direction Dimitar Christoff , finally fixed it :) — Aaqib, Feb 26 '18 at 16:57

score 1 · Answer 2 · answered Feb 26 '18 at 16:39

1

You need to wrap your Routes in a Switch. A Switch will match the first Route and return it. If you don't use a switch, like you've done here, it will render out each route that matches the current path.

Change it to:

<BrowserRouter>
    <Switch>
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
    </Switch>
</BrowserRouter>

answered Feb 26 '18 at 16:39

Chase DeAnda

13,160
2
26
39

Returns an error Switch is not defined – David Essien Feb 26 '18 at 16:41
@DavidEssien You need to import `Switch` at the top of your component. `import { Switch } from react-router-dom;`. – Chase DeAnda Feb 26 '18 at 16:50

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

The problem arises because all the Routes components that match the location will render. In order to render a single route (first match) you need to wrap your routes in a Switch component.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact={true} path="/" component={App} />
            <Route path="/One" component={One} />
            <Route path="/Two" component={Two} />
            <Route path="/Three" component={Three} />
            <Route component={FourOFour} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);

<Route> responsibility is to render some UI when a location matches the route's path.

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

React-Router 4 default route content displays on all other components

3 Answers3