React router long nested routing

Question

Question about routing, i want to have this structure:

/admin/:userId/settings/:settingId

How to setup router for this case? I tried this:

<Route exact path="/admin/:userId">
                user
                <Route exact path="/settings/:settingId">
                    setting
                </Route>
            </Route>

Possible duplicate of [Nested routes with react router v4 / v5](https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5) — Giorgi Moniava, Sep 09 '19 at 07:56

score 1 · Answer 1 · answered Sep 09 '19 at 08:04

you can use in this situation the link look

<Link exact path="/admin/:userId"><a>useer<a><Link/>
<Link exact path="/settings/:settingId"><a>Setting<a><Link/>

you should add this in the router as this

<Route exact path="/admin/:userId" component={userId} />
<Route exact path="/admin/:userId/settings/:settingId" component= {settingsId} />

score 0 · Answer 2 · answered Sep 09 '19 at 07:57

Like this

Each part you render other component.

<Route exact path="/admin" component={admin} />
<Route exact path="/admin/:userId" component={userId} />
<Route exact path="/admin/:userId/settings" component={settings} />
<Route exact path="/admin/:userId/settings/:settingId" component= {settingsId} />

And you also can each route inside his father component.

React router long nested routing

2 Answers2

Like this