React|React Router v6 探索 ReactRouterv6探索

前言没事翻了翻 React Router 的文档，发现已推到了 v6.2.2 版本，这个版本做了很大的改动，让我们一起看看吧
为什么推出 v6

推出 v6 的最大原因是 React Hooks 的出现
v6 写的代码要比 v5 代码更加紧凑和优雅

我们通过代码来感受下，这是 v6 写的伪代码

import { Routes, Route, useParams } from "react-router-dom"; function App() { return ( ); }function Head() { let { id } = useParams(); return ( <>
); }function Footer() { let { id } = useParams(); }

这是 v5 写的伪代码

import * as React from "react"; import { Switch, Route } from "react-router-dom"; class App extends React.Component { render() { return ( ()} />); } }class Head extends React.Component { render() { return ( <>
); } }class Footer extends React.Component { render() { return ( <> ); } }

这个例子表明

Hooks 消除了使用访问路由器内部状态的需要
手动传递 props 将该状态传播到子组件的需要
应用程序包体积更小

文章图片

增加了哪些特性？

升级为
- Routes 内的所有和是相对的。这使得和中的代码更精简、更可预测
- 路由是根据最佳匹配，而不是按顺序遍历，这避免了由于路由不可达而导致的错误
- 路由可以嵌套在一个地方，而不是分散在不同的组件中
新钩子 useRoutes 代替 react-router-config

之前：

import React, { lazy } from 'react'; import PrivateRoute from '@components/PrivateRoute/index'; const Dashboard = lazy(() => import('@pages/dashboard/index')); const Abount = lazy(() => import('@pages/abount/index')); const routes = [ { path: '/home', component: Dashboard }, { path: '/about', component: Abount }, ]; const RouteWithSubRoutes = route => (); const routeConfig = routes.map((route, i) => ); export default routeConfig;

现在

function App() { let element = useRoutes([ { path: '/', element:}, { path: 'users', element: , children: [ { path: '/', element: }, { path: ':id', element: }, { path: 'me', element: }, ] } ]); return element; }

就感觉更优雅一些

用 useNavigate 代替 useHistory

之前

import { useHistory } from "react-router-dom"; function App() { let history = useHistory(); function handleClick() { history.push("/home"); } return (); }

现在

import { useNavigate } from "react-router-dom"; function App() { let navigate = useNavigate(); function handleClick() { navigate("/home"); } return (); }

这个变化不是很大

Route 的变化

4.1 移除，使用 /* 代替

4.2 使用代替

import Profile from './Profile'; // v5 // v6

4.3 Outlet
我们使用一个元素作为占位符。在这种情况下，Users 组件如何呈现其子路由。因此，将根据当前位置呈现一个或元素
4.4

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'; function App() { return ( }> } /> } /> } /> ); }function Users() { return ( My Profile ); }

体验 v6 这里我们使用 create-react-app 来创建项目，安装好之后，进入项目，安装 react-router-dom@6 依赖

$ npx create-react-app react-app $ cd react-app $ npm install react-router-dom@6

src/index.js 在编辑器中打开，BrowserRouter 从顶部附近导入 react-router-dom 并将包装在

// src/index.js import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render( , document.getElementById("root") );

打开 src/App.js 并用一些路由替换默认标记

// App.js import * as React from "react"; import { Routes, Route, Link } from "react-router-dom"; import "./App.css"; function App() { return (Welcome to React Router! ); }

现在，仍在 src/App.js，创建你的路由组件