React Router 6

概述

React Router 以三个不同的包发布到 npm 上，它们分别为：

1. react-router: 路由的核心库，提供了很多的：组件、钩子。
2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。

变化

与React Router 5.x 版本相比，改变了什么？

1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

2. 语法的变化：component={About} 变为 element={<About/>}等。

3. 新增多个hook：useParams、useNavigate、useMatch等。

4. 官方推荐使用函数式组件

文档

官网地址：https://reactrouter.com/

路由使用步骤

第一步：安装

react-router-dom是浏览器端的基于react-router库的库，所以装了这个以后就不用再手动装react-router了

npm install react-router-dom

第二步：连接路由

连接你的App到浏览器的URL。用BrowserRouter包裹在你的App的外面

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

第二步：路由表配置

//路由表配置：src/routes/index.jsx
import { Navigate } from 'react-router-dom';import Home from '../views/Home';
import Friend from '../views/Friend';
import Setting from '../views/Setting';
import NotFound from '../views/NotFound';
import Chat from '../views/Chat';const routes = [// Navigate 重定向{ path: '/', element: <Navigate to='/home' /> },{ path: '/home', element: <Home /> },{path: '/friend',element: <Friend />,children: [{ path: 'chat/:name', element: <Chat /> }],},{ path: '/setting', element: <Setting /> },{ path: '*', element: <NotFound /> },
];export default routes;

第四步：注册路由及配置路由链接

在src/App.jsx里注册路由，添加链接和全局导航。

// App.jsx
import { useState } from 'react';
import './App.css';import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routes';const App = () => {// 根据路由表生成对应的路由规则const ElementRouter = useRoutes(routes);const [items] = useState([{ path: '/home', title: '首页' },{ path: '/friend', title: '好友' },{ path: '/setting', title: '设置' },]);return (<div className='app'><nav className='nav'><div className='w'>{/* 路由链接 */}{items.map(item => (<NavLink className={({ isActive }) => (isActive ? 'active' : '')} to={item.path} key={item.path}>{item.title}</NavLink>))}</div></nav>{/* 注册路由 */}{ElementRouter}</div>);
};export default App;

第五步：创建路由组件

路由组件都放在src目录下的views或者pages文件中

路由监听

// 监听路由的变化
const location = useLocation();
useEffect(() => {console.log('进入：', location.pathname);return () => {console.log('离开：', location.pathname);};
});