React Router v6 的路由切换实现方式
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users/*" element={<Users />} />
</Routes>
</BrowserRouter>
);
}
export default App;
这个例子展示了如何在React Router v6中定义路由。它使用BrowserRouter
作为路由的顶层容器,并通过Routes
和Route
组件配置具体的路由。每个Route
定义了一个路径和与之关联的React组件。当用户访问对应的URL时,相应的组件会被渲染。这种方式简洁明了,易于理解和使用。
评论已关闭