时间戳

首页 > 解决方案 > React-Router：使用类组件处理深度嵌套的路由

javascript - React-Router：使用类组件处理深度嵌套的路由

问题描述

试图弄清楚如何在深度嵌套的类组件路由中导航，但我对如何正确地做到这一点有点迷茫。

所以这里是组件的一般架构：

--Component L
  |_Component L1
  |_Component L2

--Component S (accessible after authentication)
  |_Component S1
    |_Component S1.1
      |_Component S1.1.1
      |_Component S1.1.2
  |_Component S2
    |_Component S2.1 
    |_Component S2.2
    |_Component S2.3
      |_Component S2.3.1
  |_Component S3
    |_Component S3.1

从技术上讲，嵌套组件可能比显示的要深得多。一般的想法是组件L和S是较小组件的父容器（或锚点）；S1、S2、 和等S3组件是不同类别的组件，每个类别下的组件更多。在任何时候，最顶层的组件S都是可见的，并提供按钮/选项卡来导航到组件S1、S2和之一，这些组件S3应该canvas div在组件内绘制S。canvas div每次路由更改都应仅更新其中的内容。

L目前，要在和之间导航S，我进行了以下Switch设置：

<Switch>
    <Route to='/L' component={L} />
    <AuthRoute to='/S' component={S} />
</Switch>

和组件S看起来大致是这样的：

export default class S extends Component {
    <Menu>
        <Button>to S1</Button>
        <Button>to S2</Button>
        <Button>to S3</Button>
    </ Menu>
    <div>
        <Content >
            Child components should be drawn in here.
        <Content />
    </ div>
}

该文档演示了一个使用 的示例useRouteMatch()，但这仅在功能组件中可用。
如何使用类组件来做到这一点？

编辑：忘了提，但每个子组件都提供了一种返回其正上方父级的方法。

标签： javascriptreactjsreact-router

解决方案

<Switch>
<Route to='/L' component={L} />
<AuthRoute to='/S' component={S} />

是你的第一层路由。

你只需要对 L 和 S 组件做同样的事情。

在您的 L 组件中。

 <Switch>
    <Route to='/L/L1' component={L1} />
    <Route to='/L/L2' component={L2} />
  </Switch>

在您的 S 组件中。

 <Switch>
    <Route to='/S/S1' component={S1} />
    <Route to='/S/S2' component={S2} />
    <Route to='/S/S3' component={S3} />
  </Switch>

当层次结构下降时，对每一层执行相同的操作。

推荐阅读