react-router-dom not working as intended [duplicate]

Question

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.

Borys Kupar · Accepted Answer · 2017-10-13 14:08:20Z

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>

edited Oct 13, 2017 at 14:08

answered Oct 13, 2017 at 12:15

Borys Kupar

1,73112 silver badges25 bronze badges

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

2 Comments

John Anisere Over a year ago

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.

Borys Kupar Over a year ago

because path "/" is included in '/jjj' you need to specify exact property for Route. So only when "/" exactly is matching - you render the component.

dpetrini · Accepted Answer · 2017-10-13 12:24:05Z

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 />

edited Oct 13, 2017 at 12:24

answered Oct 13, 2017 at 12:16

dpetrini

1,2491 gold badge14 silver badges26 bronze badges

4 Comments

dpetrini Over a year ago

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> </div> </BrowserRouter />

John Anisere Over a year ago

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 localhost:3000 the component App still displays.which is not supposed to be.

dpetrini Over a year ago

did you tried the exact props as would be in <Route exact path="/" component={App}/>

John Anisere Over a year ago

@ dpetrini thanks.its working fine now

Collectives™ on Stack Overflow

react-router-dom not working as intended [duplicate]

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related