React Router 中嵌套路由中的默認組件

Question

在 React Router 中，我有一個嵌套的 Route

<Route path='about' component={{main: About, header: Header}}>
  <Route path='team' component={Team} />
</Route>

所以現在當我去/about/team時它會顯示 Team 。

但是，當我訪問/about時，如何設置要查看的組件？

我努力了

<Route path='about' component={{main: About, header: Header}}>
  <IndexRoute component={AboutIndex} />
  <Route path='team' component={Team} />
</Route>

和

<Route path='about' component={{main: About, header: Header}}>
  <Route path='/' component={AboutIndex} />
  <Route path='team' component={Team} />
</Route>

但它不起作用。

我的 About 組件看起來像這樣

class About extends React.Component {
  render () {
    return (
      <div>
        <div className='row'>
          <div className='col-md-9'>
            {this.props.children}
          </div>
          <div className='col-md-3'>
            <ul className='nav nav-pills nav-stacked'>
              <li className='nav-item'><IndexLink className='nav-link' to='/about' activeClassName='active'>About</IndexLink></li>
              <li className='nav-item'><Link className='nav-link' to='/about/team'>Team</Link></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

反應路由器 4 更新

默認路由是沒有路徑的路由。

import BrowserRouter from 'react-router-dom/BrowserRouter';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';

<BrowserRouter>
  <Switch>
    <Route exact path='/about' component={AboutIndex} />
    <Route component={AboutIndex} /> // <--- don't add a path for a default route
  </Switch>
</BrowserRouter>

---

如果您的組件中不需要此對象{main: About, header: Header} ，則只需將 AboutIndex 放在組件屬性中。 那應該工作

<Router history={browserHistory}>
  <Route path='about' component={AboutIndex}>
    <IndexRoute component={AboutIndex} />
    <Route path='team' component={Team} />
  </Route>
</Router>

如果您仍然需要主組件和標題組件，只需根據您的需要將它們添加為父組件、子組件或兄弟組件

Answer 2

反應路由器 v6

該路由有一個屬性index ，用於根據文檔定義索引路由。

<Route index element={<DefaultPage />} />

Answer 3

我發現的另一種方法是使用帶有index屬性的 react-router-dom 包的 Navigate 組件。 用戶導航到support路線后，將默認為以下示例中的about頁面。

<Route path="support/*" element={<Support />}>
    <Route index element={<Navigate to="about" replace />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact/>} />
</Route>