动态路由未加载嵌套路由答案

【问题标题】：Dynamic Route not being loaded with nested routing动态路由未加载嵌套路由
【发布时间】：2020-09-22 18:47:42
【问题描述】：

我认为我没有完全理解嵌套时如何使路由工作我之所以采用这种结构是因为我需要在 SideDrawer 中进行更改以影响 Article 组件而且我还没有找到一种方法通过路由将道具从父组件传递给它的子组件。目前所有路线都在工作，除了“/innerbrowser/easynhknews/articles/:id” 让我知道是否有更好的方法来构建它并仍然获得我想要的功能

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>
        );
    }
}

【问题讨论】：

标签： reactjs react-router-dom nested-routes

【解决方案1】：

所以我的部分问题是我的错我的菜单不太对，所以我修复了，然后我将 InnerBrowser.js 文件中的一行从

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

到

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

这甚至不调用 Article 组件。不太清楚为什么。也许更聪明的人可以解释一下。为了解决这个问题，我回到原来的线路，但稍作调整并让它工作

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

【讨论】：

还有第三种方法，Children Elements，用于使用<Route> 进行渲染，这是推荐的一种。我也想试试。 Docs。 <Route exact path="/foo/:id"> <Article /> </Route>