在React 18中,可以使用react-router-dom库来编写路由。下面是一个简单的示例,展示了如何在React 18中使用react-router-dom来编写路由:
首先,确保已经安装了react-router-dom库。如果尚未安装,可以使用以下命令进行安装:
bash复制代码
npm install react-router-dom
接下来,在需要使用路由的组件中,导入所需的路由组件:
javascript复制代码
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
在组件中,使用BrowserRouter组件包裹整个应用,并在其中使用RouteSwitch组件定义路由:
javascript复制代码
reactrouter6路由拦截
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
在上面的示例中,我们定义了两个路由:一个是根路径/,对应的组件是Home;另一个是路径/about,对应的组件是About。使用Link组件创建了两个导航链接,分别指向根路径和/about路径。在Switch组件中,根据当前路径渲染对应的组件。
这只是一个简单的示例,你可以根据自己的需求进行更复杂的路由配置。请参考官方文档以获取更多关于react-router-dom的详细信息和用法示例。