Question

我有一个反应中的路由系统，以及一个包装系统的Layout组件。我试图弄清楚如何找出在布局组件中选择了哪个路由组件

ReactDOM.render(
<BrowserRouter>
    <Layout>

            <Switch>
                <Route exact strict path={"/home"} component={home} />
                <Route exact path={"/page1"} component={page1} />
                <Route exact path={"/page2"} component={page2} />
                <Route exact path={"/page3"} component={page3}/>
                <Route exact path={"/page4"} component={page4}/>

            </Switch>

    </Layout>
    </BrowserRouter>
,document.getElementById('root'));

是否有某种方法可以按照 this.props.children.selectedRoute中的Layout Component，然后会返回组件名称吗？

Answer 1

Layout在BrowserRouter内部，这确实是可能的。

您要做的就是将Layout组件包装在withRouter高阶组件中。

export default withRouter(Layout)

然后在Layout内可以访问路由器道具location

function Layout({ location }) {
  if(location.pathname==="page1") {
    // Do something
  } else {
    // Other cases
  }
}

Answer 2

foreach中的

BrowserRouter使用React上下文将路由器上下文传递到组件树。

一种了解查看路线的干净方法是将react-router-dom钩接到提供的路由器上下文中。您可以通过如下声明Layout组件的contextTypes属性来实现此目的。

Layout

如何识别哪个路由器组件已加载到React-Router中

2 个答案: