配置
npm i react-router-dom
基本使用
目录结构
在src中创建page文件夹放置各页面组件，router中放置路由
1、router中配置路由
在/router/index.js中，使用createBrowserRouter配置路由。
import { createBrowserRouter } from "react-router-dom";import Login from '../page/Login';
import Article from "../page/Article";const router = createBrowserRouter([{path: '/login',element: <Login/>},{path: 'Artical',element: <Article/>}
])export default router;
2、在使用路由组件的地方包裹（这里在index.js中）
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';import { RouterProvider } from 'react-router-dom';
import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);
reportWebVitals();3、路由跳转
3.1 声明式导航
引入Link标签，包裹需要导航的按钮，使用参数to绑定需要跳转到的路由
3.2 编程式导航
使用useNavigate钩子。这个比较灵活，可以在js代码中写
二者的用法
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';const Login = () => {const navigate = useNavigate()return ( <React.Fragment><div>登录页</div>{/* 声明式 */}<Link to="/article">跳转到文章页</Link>{/* 编程式 */}<button onClick={()=> navigate('/article')}>跳转到文章页</button></React.Fragment>);
}export default Login;
4 传参
4.1 searchParams传参
传参使用?key1=value1&key2=value2
接收参数时，用useSearchParams钩子
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';const Login = () => {const navigate = useNavigate()return ( <React.Fragment><div>登录页</div><Link to="/article?id=123&name=test">跳转到文章页（带参数）</Link><button onClick={()=> navigate('/article/1001')}>跳转到文章页（params传参）</button></React.Fragment>);
}export default Login;
接受参数
import React from 'react';
import { useSearchParams } from 'react-router-dom';const Article = () => {const [params] = useSearchParams();const id = params.get('id');const name = params.get('name')return ( <div>文章页<div>id: {id},name: {name}</div></div> );
}export default Article;
4.2 params传参
传参时，/article/1001
接收时，用useParams钩子
这种传参需要在route中加上参数声明
import { createBrowserRouter } from "react-router-dom";import Login from '../page/Login';
import Article from "../page/Article";const router = createBrowserRouter([{path: '/login',element: <Login/>},{path: '/article/:id',element: <Article/>}
])export default router;
传参同理，接收代码如下
import React from 'react';
import { useParams, useSearchParams } from 'react-router-dom';const Article = () => {// const [params] = useSearchParams();// const id = params.get('id');// const name = params.get('name')const params = useParams();const id = params.id;return ( <div>文章页<div>id: {id},</div></div> );
}export default Article;
5、嵌套路由
1、在router中使用children配置子路由
import { createBrowserRouter } from "react-router-dom";import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{path: 'board',element: <Board/>},{path: 'about',element: <About/>}]}
])export default router;
2、使用<Outlet/>组件配置二级路由的位渲染置
例如，根组件是<Layout/>，在Layout中：
import { Link, Outlet } from "react-router-dom";const Layout = () => {return ( <div><div>一级路由</div><div><Link to="/board">面板</Link></div><div><Link to="/about">关于</Link></div>{/* 配置二级路由的出口 */}<Outlet/></div>);
}export default Layout;
若需要二级路由的默认展示页，则在router中不添加path，增加index: true即可。例：
import { createBrowserRouter } from "react-router-dom";import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,element: <Board/>},{path: 'about',element: <About/>}]}
])export default router;
同时，<Link/>中的to也需要同步更改为/
此时，<Board/>默认显示
6、404配置
在路由表的末尾配置
{path: '*',element: <NotFound/>}
7、路由模式设置
配置路由时，用createBrowserRouter就是history路由，用createHashRouter是hash路由，其他一致。
import { createBrowserRouter } from "react-router-dom"; // history路由
import { createHashRouter } from "react-router-dom"; // hash路由const router = createHashRouter([])export default router;
