如何使用React Router在嵌套組件之間移動

Question

我一直在與React Router配合良好，直到不得不嘗試嵌套組件並獲得導航欄以顯示路徑為止。 例如，我想從我的比賽頁面轉到投資組合頁面，然后我希望該URL反映出來（...... /＃/ matches / portfolio）。

對我來說，文檔似乎解釋了如何執行此操作，但是我只能獲取要更改的網址，而不能更改頁面內容。 只顯示該視圖，不會顯示任何錯誤。

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

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

以下是我如何上班的路線。 這不是文檔所說的，但可以！

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>