Dynamic Route not being loaded with nested routing

Question

I don't think I'm fully understanding how I can make routing work when nested I have it structured this way because I need changes in SideDrawer to affect the Article component and I haven't found a way to pass props down from a parent component to it's children through routing. Currently all the routes are working except for "/innerbrowser/easynhknews/articles/:id" Let me know if there is a better way to structure this and still attain the function I want

App.js

    class App extends Component {
     render() {
        return (
            <div>
                <Frame>
                    <Switch>
                        <Route path="/" exact component={Dashboard} />
                        <Route path="/innerbrowser" component={InnerBrowser} />
                    </Switch>
                </Frame>   
            </div>
        );
    }
}

InnerBrowser.js

class InnerBrowser extends Component
{
 //unrelated code.....
 render() {
        return (
            <div className={classes.InnerBrowser}>
                <SideDrawer />
                <div className={classes.InnerBrowserBody}>
                    <Switch>
                        <Route path="/innerbrowser/easynhknews/articles/:id" exact render={() => <Article />}/>
                        <Route path="/innerbrowser/easynhknews" render={() => <ArticleTiles />}/>
                    </Switch>
                </div>
            </div>
        );
    }
}

score 0 · Answer 1 · answered Jun 04 '20 at 16:59

So part of my issue was my fault my wasn't quite right in my menu so I fixed and then I changed the one line in my InnerBrowser.js file from

<Route path="/innerbrowser/easynhknews/articles/:id" exact render={() => <Article />}/>

to

<Route path="/innerbrowser/easynhknews/articles/:id" exact component={Article}/>

This doesn't even call the Article component. Not quite sure why. Maybe someone smarter can explain. To fix this issue I then when back to the original line I had but with a slight tweak and got it working

<Route path="/innerbrowser/easynhknews/articles/:id" exact render={(props) => <Article {...props} />}/>

There is a 3rd method too, **Children Elements**, for rendering with `` and that's the recommended one. I would try that too. [Docs](https://reacttraining.com/react-router/web/api/Route/route-render-methods). `
` — Ajeet Shah, Jun 04 '20 at 17:20

Dynamic Route not being loaded with nested routing

1 Answers1