动态路由未使用嵌套路由加载

时间:2020-06-03 22:08:39

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

我不认为我完全了解嵌套时如何使路由工作 之所以采用这种结构,是因为我需要在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>
        );
    }
}

1 个答案:

答案 0 :(得分:0)

所以我问题的一部分是我的错 我的菜单不太正确,因此我进行了修复,然后将InnerBrowser.js文件中的一行更改为

android.defaultConfig.manifestPlaceholders = [
  'appAuthRedirectScheme': '...'
]

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

这甚至都没有称为“文章”组件。不太清楚为什么。也许更聪明的人可以解释。 为了解决这个问题,我回到原来的路线时,做了些微调整之后就可以正常工作

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