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(
);

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 (
{/* 导航栏 */}
首页 |
关于
{/* 路由配置 */}
} />
} />
{/* 404 页面，匹配所有未定义的路由 */}
} />
);
}
export default App;

3. 创建页面组件

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

​​src/pages/Home.jsx​

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

src/pages/About.jsx​

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

src/pages/NotFound.jsx​

function NotFound() {
return 404 - 页面未找到;
}
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 ;
}

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

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

注意，是：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 (
加载中...}>
} />
} />
);
}

---

进阶学习

想要更系统地学习？推荐以下课程：

1. React实战进阶45讲 — 全面掌握React开发