React Router 4 是一个用于 React 应用程序的路由库,它允许我们在应用程序中实现页面之间的导航和路由功能。在 React Router 4 中,我们可以使用嵌套路由来创建具有层次结构的路由系统。
要创建具有嵌套路由但回退到未找到的根路径,我们可以按照以下步骤进行操作:
npm install react-router-dom
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/nested" component={Nested} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
const Home = () => {
return (
<div>
<h1>Home</h1>
<Link to="/nested">Go to Nested</Link>
</div>
);
};
const Nested = () => {
return (
<div>
<h1>Nested</h1>
<Link to="/">Go to Home</Link>
</div>
);
};
const NotFound = () => {
return (
<div>
<h1>404 - Not Found</h1>
<Link to="/">Go to Home</Link>
</div>
);
};
在上述代码中,我们使用 <Switch>
组件来确保只有一个路由会被渲染。<Route>
组件用于定义路径和对应的组件。exact
属性用于确保只有在路径完全匹配时才会渲染对应的组件。
当用户访问根路径时,会渲染 Home 组件。在 Home 组件中,我们可以使用 <Link>
组件来导航到嵌套路径 /nested
。当用户访问 /nested
路径时,会渲染 Nested 组件。在 Nested 组件中,我们可以使用 <Link>
组件来返回到根路径。
如果用户访问了未定义的路径,会渲染 NotFound 组件,其中包含一个返回到根路径的链接。
领取专属 10元无门槛券
手把手带您无忧上云