React18路由详解

React Router 6 是 React 18 中支持的版本。以下是如何在 React 18 项目中使用 React Router 6 的基本示例：

首先，确保安装了 React Router 6：

npm install react-router-dom

然后，你可以在你的应用中设置路由：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}
 
function Home() {
  return <h2>Home</h2>;
}
 
function About() {
  return <h2>About</h2>;
}
 
function User() {
  // 使用 useParams 钩子获取动态路由参数
  let { id } = useParams();
  return <h2>User: {id}</h2>;
}

在这个例子中，我们使用 <BrowserRouter> 作为我们的路由器。每个 <Route> 定义了一条路由规则，element 属性用于渲染与该路由匹配的组件。动态路由参数可以通过 useParams 钩子获取。这是一个基本的路由设置，React Router 6 还支持更多高级特性，如路由嵌套、重定向等。