如何 link 到 React 中的嵌套路由？

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 Link，然后导航到 localhost:8080/workspaces/444/run

目前状态如何

如果我手动输入 url localhost:8080/workspaces/444/run，一切正常。但是当我点击导航栏中的 Link 时，我会到达 localhost:8080/run.

谁能告诉我这是怎么回事？这一切是如何联系起来的？

Answer 1

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

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

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

如何 link 到 React 中的嵌套路由？

How to link to a nested route in React?

reactjs

react-router

我想要的

目前状态如何