在React应用中,路由器(如React Router)用于管理页面导航和状态。子路由是指在一个父路由下定义的多个子路径,这些子路径通常用于构建复杂的导航结构。
假设我们有一个父路由 /dashboard
,并且希望在下面定义两个子路由 /dashboard/profile
和 /dashboard/settings
。
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/dashboard" component={Dashboard} />
</Switch>
</div>
</Router>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<nav>
<ul>
<li>
<Link to="/dashboard/profile">Profile</Link>
</li>
<li>
<Link to="/dashboard/settings">Settings</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/settings" component={Settings} />
</Switch>
</div>
);
}
function Profile() {
return <h3>Profile</h3>;
}
function Settings() {
return <h3>Settings</h3>;
}
export default App;
/dashboard/profile
是相对于 /dashboard
的。Switch
组件:Switch
组件确保只渲染第一个匹配的路由,避免多个路由同时渲染的问题。通过上述方法,可以有效解决React应用中不显示路由器子路由的问题。关键在于确保路径匹配正确,合理使用 Switch
组件,并正确配置嵌套路由。
领取专属 10元无门槛券
手把手带您无忧上云