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

score 1 · Answer 1 · answered Jan 12 '18 at 11:27

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 '18 at 11:27

linux

141
2
12

score 1 · Accepted Answer · answered Jan 12 '18 at 11:27

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 '18 at 11:27

raksheetbhat

850
2
11
25

` ` Can i route one component with two path as like above code? – Prakash Satani Jan 12 '18 at 11:45
Yes, you can. Switch will choose the route that exactly matches the path defined. – raksheetbhat Jan 12 '18 at 12:00
It's a good practice to upvote answers that solve your problem, as it motivates better answers. – raksheetbhat Jan 13 '18 at 05:19

nested route for one component reactjs

2 Answers2