React Router中嵌套路由的默认组件

Question

在React Router中，我有一个嵌套的路由。

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

现在当我访问/about/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>
    );
  }
}

- Jamgreen

Answer 1

React Router v6

路由有一个属性 index，用于根据文档定义索引路由。

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

- Ishan Madhusanka

Answer 2

REACT ROUTER 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>

如果你仍然需要主要组件和头部组件，根据你的需求将它们添加为父组件、子组件或同级组件。

- Craig1123

---

你是什么意思？我确实需要它们。 - Jamgreen

{main: About, header: Header} 的目的是什么？如果它们只是子组件，请将它们放在您的 about 组件内。如果 'About' 是父组件，请将其放入组件属性中，取代 'AboutIndex' 并将 'AboutIndex' 放入 'About' 组件中。 - Craig1123

什么是 IndexRoute？ - jayarjo

Answer 3

我找到的另一种方法是使用react-router-dom包中的Navigate组件，并使用index属性。在用户导航到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>

- mandroid