Question

我有一个AngularJS背景，并开始使用React。我正在使用react-router，并且希望基本上具有以下设置：

模板

export default ( props ) => {
  return (
    <div>
      <Navbar></Navbar>
      { props.children }
    </div>
  );
}

App.js中的路由

<Router>
  <Route path="/" component={Template}>
   <IndexRoute component={RestaurantRoulette} />
    <Route name="workspace" path="workspace(/:workspace_id)" component={RestaurantRoulette}>
      <Route name="run" path="run" component={Run}></Route>
    </Route>
  </Route>
</Router>

导航栏

<ul className="navigation">
  <li>RestaurantRoulette</li>
  <Link to="run">Run</Link>
  <li>Save</li>
</ul>

我想要什么

当我在localhost:8080/workspaces/444时，我想点击Run链接，然后导航到localhost:8080/workspaces/444/run

当前状态是什么

如果我手动输入网址localhost:8080/workspaces/444/run，一切正常。但是，当我点击导航栏中的链接时，我会转到localhost:8080/run。

有人可以告诉我这是如何运作的吗？这是如何连接的？

Answer 1

我认为Link标签应该是这样的：

<Link to={'workspaces/' + this.props.workspace_id + '/run'}>Run</link>

您应该从Template中的路径获取workspace_id，并将其传递给NavBar组件

如何链接到React中的嵌套路由？

我想要什么

当前状态是什么

1 个答案: