React 18.2中使用React Router 6.4

一、安装 React Router v6

在项目根目录下运行：

npm install react-router-dom@6.4

二、基本用法 —— 配置路由

1. 基本的路由设置（使用 BrowserRouter）

在 React 18 中，通常你会在 src/main.jsx或 src/index.js中渲染你的 App 组件，并用 <BrowserRouter>包裹整个应用。

​​src/main.jsx（或 src/index.js）​

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
);

2. 在 App 组件中配置路由（使用 <Routes>和 <Route>）

src/App.jsx​

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';function App() {return (<div>{/* 导航栏 */}<nav><Link to="/">首页</Link> | <Link to="/about">关于</Link></nav>{/* 路由配置 */}<Routes><Route path="/" element={<Home />} /><Route path="about" element={<About />} />{/* 404 页面，匹配所有未定义的路由 */}<Route path="*" element={<NotFound />} /></Routes></div>);
}export default App;

3. 创建页面组件

在 src/pages/目录下创建对应的页面组件，例如：

​​src/pages/Home.jsx​

function Home() {return <h1>欢迎来到首页</h1>;
}export default Home;

src/pages/About.jsx​

function About() {return <h1>这是关于页面</h1>;
}export default About;

src/pages/NotFound.jsx​

function NotFound() {return <h1>404 - 页面未找到</h1>;
}export default NotFound;

三、<Outlet />

用于在​​父路由组件​​中预留一个位置，用来​​渲染其子路由匹配到的组件​。

可以把 <Outlet />想象成：一个插槽（slot），子路由的组件会“插入”到这个插槽中显示。​

或者：

父组件说：“我负责整体布局，但中间这部分内容由你来决定（即子路由），你就放在 <Outlet />这个位置吧！”

四、编程式导航（使用 useNavigate）

在函数组件中，可以使用 useNavigate进行编程式跳转：

import { useNavigate } from 'react-router-dom';function LoginButton() {const navigate = useNavigate();const handleLogin = () => {// 模拟登录逻辑...navigate('/dashboard'); // 跳转到 dashboard};return <button onClick={handleLogin}>登录</button>;
}

五、获取路由参数（如：/dashboard/:id）

// Route 配置
<Route path="users/:userId" element={<UserProfile />} />// UserProfile.jsx
import { useParams } from 'react-router-dom';function UserProfile() {const { userId } = useParams();return <h2>用户ID: {userId}</h2>;
}

注意，是：path="users/:userId"，不是path="/users/:userId"。

六、结合 React.lazy 和 Suspense 实现​​按需加载（懒加载）路由

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));function App() {return (<Suspense fallback={<div>加载中...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Suspense>);
}