[英]Default component in nested routes in React Router
在 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>
);
}
}
默认路由是没有路径的路由。
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>
如果您仍然需要主组件和标题组件,只需根据您的需要将它们添加为父组件、子组件或兄弟组件
我发现的另一种方法是使用带有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.