前言
没事翻了翻 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 内的所有
和 是相对的。这使得 和 中的代码更精简、更可预测 - 路由是根据最佳匹配，而不是按顺序遍历，这避免了由于路由不可达而导致的错误
- 路由可以嵌套在一个地方，而不是分散在不同的组件中
- 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) => 现在
function App() {
let element = useRoutes([
{ path: '/', element:},
{
path: 'users',
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
- 4.3 Outlet
我们使用一个Users组件如何呈现其子路由。因此，将根据当前位置 - 4.4
import {
BrowserRouter,
Routes,
Route,
Link,
Outlet
} from 'react-router-dom';
function App() {
return (
);
}function Users() {
return (
体验 v6 这里我们使用
create-react-app 来创建项目，安装好之后，进入项目，安装 react-router-dom@6 依赖$ npx create-react-app react-app
$ cd react-app
$ npm install react-router-dom@6src/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(
打开
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，创建你的路由组件// src/App.js
function Home() {
return (
<>
Home
);
}function About() {
return (
<>
About
);
}运行
npm start ，您应该会看到 Home 标识如何升级 v6 官方的迁移指南在这里：React Router v6 迁移指南
参考文章
- React Router v6 Preview
- React Router
Hook 重构你的应用，我的建议是可以尝试重要的事 如果你觉得这篇内容对你挺有启发，别忘记点赞 + 关注
欢迎添加我的个人微信：Jiang9684，一起交流前端技术
【React|React Router v6 探索】我的博客地址
