React router v5: need a nested route in dynamic routes

Question

Happening specifically on react-router-dom v5.2.0 I have a list of items, all of which need their own page, and within that dynamic route, I would like some nested routes.

Think of it like this:

myapp.com/:item (main item page)
myapp.com/:item/about (about item page)
myapp.com/:item/faq (faq item page)

The thing is, with the way I'm implementing it, every nested /:item/whatever page gets a 404. Here is what my routing currently looks like:

const App = ({}) => {
    return (
        <Router>
            <Switch>
                <Route exact path='/:id' component={Item}>
                </Route>
            </Switch>
        </Router>
    )
}

const Item = ({ match }) => {
    return (
        <div>
            TODO: Item {match.url}
            <Switch>
                <Route path={`${match.path}/about`}>
                    <h1>TODO: About</h1>
                </Route>
                <Route path={`${match.path}/faq`}>
                    <h1>TODO: FAQ</h1>
                </Route>
            </Switch>
        </div>
    );
};

As it stands, I can get the pages for /:item, but if I try to go to their nested routes, I get 404s. Is something wrong in my setup? How can I get this to work?

Take note that I've tried a bunch of different variations of this:

Nested routes in the App component
With and without the Switch wrapper
Passing the component into the Route as a component prop for the nested ones

Edit: decided to include a version of my Item component where I have every variation of a Route that I could think of for the /about route. Absolutely nothing works, which it should according to the docs (see the recursive paths) and I am starting to question my sanity

const Item = ({ match }) => {
    const { url } = useRouteMatch();
    return (
        <div>
            TODO: Item {match.url}
            <Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`about`} component={() => <h1>TODO: About</h1>}/>
            <Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
            <Switch>
                <Route path={`${match.path}/about`}>
                    <h1>TODO: About</h1>
                </Route>
                <Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`/:about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`about`} component={() => <h1>TODO: About</h1>}/>
                <Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
            </Switch>
        </div>
    );
};

score 0 · Accepted Answer · answered Nov 19 '20 at 14:14

So it would seem I was going about this the completely wrong way.

For what I wanted to do, my nested routes needed to be on the App component, or at least on the root of the first Switch wrapper.

So basically this was the solution:

const App = ({}) => {
    return (
        <Router>
            <Switch>
                <Route exact path='/:id' component={Item}/>
                <Route exact path='/:id/about' component={() => <div>TODO: About</div>}/>
                <Route exact path='/:id/faq' component={() => <div>TODO: FAQ</div>}/>
            </Switch>
        </Router>
    )
}

I still am confused because the docs showed it differently, but anyway, this is what solved the issue.

React router v5: need a nested route in dynamic routes

1 Answers1