javascript - 如何使用 React Router 在嵌套组件之间移动

Question

我一直与 react 路由器一起工作得很好，直到我不得不尝试嵌套组件并让我的导航栏显示路径。例如，我想从我的比赛页面转到作品集页面，然后我希望网址反射(reflect)这一点(....../#/matches/portfolio)。

对我来说，文档似乎解释了如何执行此操作，但我只能更改网址，而不能更改页面内容。没有显示错误，只是注意到 View 发生了错误。

这是我的包含嵌套路由的路由器:

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="home" component={Home} />
      <Route path="matches" component={Matches}>
        <Route path="portfolio" component={Portfolio}>
          <Route path="search" component={Search} />
        </Route>
      </Route>
      <Route path="create" component={Create} />
      <Route path="join" component={Join}/>
    </Route>
  </Router>
, document.getElementById('app'));

如果我在比赛页面上并想要链接到一个投资组合，我有一个按钮:

<Link to="matches/portfolio">To Portfolio</Link>

(理想情况下，我希望在网址上附加一个portfolioId，但目前我试图保持简单)

可以在此处找到该存储库: https://github.com/muddybarefeet/pirateStocks然后主路由器位于 server/client/src/app.jsx 中，所有组件位于 server/client/src/components 中。要查看项目，请运行 nodemon server.js 和 webpack

Answer 1

以下是我如何让我的路线发挥作用。这不是docs说但是它有效!

ReactDOM.render(
  <Router history={hashHistory}>
   <Route path="/" component={App}>
     <Route path="/login" component={Login} />
     <Route path="/home" component={Home} />
     <Route path="/join" component={Join}/>
     <Route path="/matches" component={Matches} />
     <Route path="/matches/portfolio" component={Portfolio} />
     <Route path="/matches/portfolio/search" component={Search} />
    <Route path="create" component={Create} />
  </Route>
</Router>
, document.getElementById('app'));

然后使用以下内容进行路由:

<Link to="/matches/portfolio">To Portfolio</Link>