nested route for one component reactjs

Question

I am new in reactJs, i was trying to do nested route for one component and it's not working following way i was trying to do nested and error occur like this

Warning: You should not use and in the same route; will be ignored

render(
<Provider store={store}>
    <ConnectedRouter history={history}>
        <div>
            <Route exact path="/" component={App} />
            <Route exact path="/test" component={App}/>
            <Route  path="/register" component={Registration}>
                <Route path="/register/pet/more" component={App}/>
            </Route>
        </div>
    </ConnectedRouter>
</Provider>,
document.getElementById('root'))

So what should i have to do for nested route for one component. Thanks

raksheetbhat · Accepted Answer · 2018-01-12 11:27:58Z

1

You can avoid nested routes and instead use a combination of Switch and exact in react-router-dom. Here's how it can be done.

<Switch>
    <Route exact path="/" component={App} />
    <Route exact path="/test" component={App}/>
    <Route exact path="/register" component={Registration} />
    <Route exact path="/register/pet/more" component={App} />
</Switch>

The idea is that Switch selects only the matching route, and exact does an exact match, so this should solve your problem.

answered Jan 12, 2018 at 11:27

raksheetbhat

1,0002 gold badges13 silver badges25 bronze badges

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

3 Comments

Prakash Satani Over a year ago

<Switch>     <Route exact path="/" component={App} />     <Route exact path="/test" component={App}/>     <Route exact path="/register" component={Registration} />     <Route exact path="/register/pet/more" component={Registration} /> </Switch>

Can i route one component with two path as like above code?

raksheetbhat Over a year ago

Yes, you can. Switch will choose the route that exactly matches the path defined.

raksheetbhat Over a year ago

It's a good practice to upvote answers that solve your problem, as it motivates better answers.

linux · Accepted Answer · 2018-01-12 11:27:42Z

1

what version of react-router are you using? If you are using React-router version 4 you put your nested route in another component.see the link below Nested routes with react router v4

answered Jan 12, 2018 at 11:27

linux

1513 silver badges12 bronze badges

Collectives™ on Stack Overflow

nested route for one component reactjs

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related