react-router-dom v4 中的多個嵌套路由

Question

我需要 react-router-dom 中的多個嵌套路由

我正在使用 react-router-dom 的 v4

我有我的

import { BrowserRouter as Router, Route } from 'react-router-dom';

我需要組件像這樣渲染

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Home 組件包含一個 Header 組件，它對於 Page1、Page2 和 Page3 組件是通用的，但在 Login 和 About 中不存在。

我的 js 代碼是這樣讀的

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

我希望登錄組件只顯示在 /login 當我請求 /page1、/page2、/page3 時，它們應該分別包含 Home 組件和該頁面的內容。

我得到的是呈現的登錄組件，並在頁面 1 的組件下方呈現。

我很確定我遺漏了一些非常微不足道的東西或在某處犯了一個非常愚蠢的錯誤，並感謝我能得到的所有幫助。 過去兩天我一直被這個問題困擾。

Answer 1

使用從 props this.props.match.path獲取的 url/path 匹配來獲取設置到組件的路徑。

定義您的主要路線如下

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

然后在Home組件中，定義你的路由

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

定義的路由如下

• /登錄
• /家
• /家/一
• /家/二
• /關於
• /等等

如果您想在HomePageOne進一步嵌套路由，例如/home/one/a和/home/one/b ，您可以繼續使用相同的方法。

注意 1：如果您不想進一步嵌套，只需使用 prop exact設置路由即可。

編輯（2017 年 5 月 15 日）

最初，我使用了props.match.url ，現在我將其更改為props.match.path 。

我們可以在路由的路徑中使用props.match.path而不是props.match.url ，這樣如果你在頂級路由中使用路徑參數，你可以通過props.match.params在內部（嵌套）路由中獲取它。

如果你沒有任何路徑參數， props.match.url就足夠了

Answer 2

在路由器 v4 中使用 Switch 組件

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>

export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

我認為這段代碼展示了使用組件的基本思想。

Answer 3

本周我遇到了同樣的問題，我認為該項目已經過去了，因為所有的文檔、示例和視頻都是針對先前版本的，而版本 4 的文檔令人困惑
這就是我完成工作的方式，如果這有幫助，請告訴我

import React, { Component } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

Answer 4

將所有子路由移動到父組件並擴展路由，如下所示。
<Route path={`${match.url}/keyword`} component={Topic}/>
還檢查反應路由器培訓

Answer 5

使用如下：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component={ExpenseDashboard} />
          <Route path='/create' component={AddExpensePage} />
          <Route path='/Edit' component={EditPage} />
          <Route path='/Help' component={HelpPage} />
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>
    );
  }
}

查看更多 @ 在 GitHub 上切換

Answer 6

我有同樣的問題，我是這樣解決的

<BrowserRouter>
          <UserAuthProvider>
            <Root>
              <Switch>
                <GuardRoute type="public" exact path="/" component={Login} />
                <GuardRoute type="private" exact path="/home" component={Home} />
                <GuardRoute
                  type="private"
                  exact
                  path="/home/mascotas"
                  component={Mascotas}
                />

              </Switch>
            </Root>
          </UserAuthProvider>
        </BrowserRouter>