2

I want to achieve this(V3) 

<Router>
    <Route path="/" component={App}/>
    <Route path="*" component={Whoops404}/>
</Router>

with V4 of react-router using react-router-dom but i'm unable to do that, when i try this

<BrowserRouter>
    <div>
        <Route path="/" component={App}/>
        <Route path="*" component={Whoops404}/>
    </div>
</BrowserRouter>

it renders all the routes in the block instead. am i doing wrong?

****EDIT****
Thank you guys.I have wrapped the routes with a Switch component,and its working fine but when i navigate to localhost:3000/jjj or other routes aside the http://localhost:3000/ the component App still displays.

John Anisere
  • 433
  • 1
  • 3
  • 11

2 Answers2

3

You need to wrap your routes with Switch component. So it can match one of the routes. You can also omit 'path="*". 

<Switch>
  <Route exact path="/" component={App}/>
  <Route component={Whoops404}/>
</Switch>
Borys Kupar
  • 1,338
  • 9
  • 21
  • Thank you.I have wrapped the routes with a Switch component,and its working fine but when i navigate to `localhost:3000/jjj` or other routes aside the `http://localhost:3000/` the component App still displays.which is not supposed to be. – John Anisere Oct 13 '17 at 12:42
  • because path "/" is included in '/jjj' you need to specify exact property for Route. So only when "/" exactly is matching - you render the component. – Borys Kupar Oct 13 '17 at 14:07
2

it seems the "/" route is included in "*".

Try:

To render the / and not the others below, in case you trying to render only "/" and getting this side effect.

(Edit: include commment here:) If does not solve, try to make render only single route with Switch: 

<BrowserRouter>
 <Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" render={ () => <About title='About' /> } />
  <Route path="/costumers" component={Costumers} /> 
  <Route component={NotFound} /> 
 </Switch>  
</BrowserRouter />
dpetrini
  • 829
  • 1
  • 7
  • 21