Question

我一直在与反应路由器一起工作，直到我不得不尝试嵌套组件并让我的导航栏显示路径。例如，我想从我的匹配页面转到投资组合页面，然后我想要网址反映这一点（...... /＃/ matches / portfolio）。

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

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

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>

（理想情况下，我希望它有一个附在url上的portfolioId，但我现在试图保持简单）

回购可以在这里找到： https://github.com/muddybarefeet/pirateStocks然后主路由器在server / client / src / app.jsx和server / client / src / components中的所有组件。要查看项目运行nodemon server.js和webpack

Answer 1

以下是我如何使用我的路线。这不是Stardust Knowledge base所说的，但它有效！

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>

如何使用React Router

1 个答案: