reactjs – React router v4嵌套路由相对路径

发布时间：2020-12-15 20:15:58 所属栏目：百科来源：网络整理

导读：我有一个带有反应路由器v4的组件到anohter组件,我想在第二个组件中添加另一个路由. 这是主要途径： const Dashboard = () = { return ( div Header/ Router div Route path="/" exact component={Wall} / Route path="/challenge/:id" component={Challenge}

我有一个带有反应路由器v4的组件到anohter组件,我想在第二个组件中添加另一个路由.

这是主要途径：

const Dashboard = () => {
  return (
    <div>
      <Header/>
      <Router>
        <div>
          <Route path="/" exact component={Wall} />
          <Route path="/challenge/:id" component={Challenge} />
        </div>
      </Router>
    </div>
  )
}

这是挑战组件：

class Challenge extends Component {
  ...

  render() {
    return (
      ...
        <Router>
          <div>
            <Route path="/overview" exact component={Overview} />
            <Route path="/discussions" exact component={Discussions} />
          </div>
        </Router>
      ...
    )
  }
}

这对我不起作用..

唯一有效的选项是在challenge组件中包含/ challenge /：id：

<Route path="/challenge/:id/overview" exact component={Overview} />
<Route path="/challenge/:id/discussions" exact component={Discussions} />

最后我想让路线看起来像这样：

www.site.com/challenge/1/overview

www.site.com/challenge/1/discussions

但是不包含每个嵌套路由中的完整路由.

解决方法

在您的挑战组件中尝试此操作：

class Challenge extends Component {
  ...

  render() {
    const { match } = this.props;
    return (
      ...
      <div>
        <Route path={`${match.url}/overview`} exact component={Overview} />
        <Route path={`${match.url}/discussions`} exact component={Discussions} />
      </div>
      ...
    )
  }
}

请注意,您不需要添加新的路由器实例,因为您的Challenge组件是您在顶级Dashboard组件中定义的路由器实例的后代.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!