动态路由未加载嵌套路由。

Question

我不认为我完全理解如何使路由工作时嵌套我有这样的结构，因为我需要在SideDrawer中的变化来影响文章组件，我还没有找到一种方法来传递道具从父组件到它的子组件通过路由.目前所有的路由工作，除了 "innerbrowsereasynhknewsarticles:id "让我知道，如果有更好的方法来结构，仍然达到我想要的功能。

浏览器.js

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

内浏览器.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>
        );
    }
}

Answer 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} />}/>