CODEWITHSUNDEEP
reactjsreact-routerreact-redux
Prakash Satani
Prakash Satani

Reputation: 67

nested route for one component reactjs

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

Upvotes: 0

Views: 69

Answers (2)

raksheetbhat
raksheetbhat

Reputation: 960

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.

Upvotes: 1

linux
linux

Reputation: 151

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

Upvotes: 1

Related Questions