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 (
加载中...}>
} />
} />
);
}