предисловие
Нечего React Router
полистать документацию, обнаружил, что ее пропихнули в v6.2.2
версию, в эту версию внесено много изменений, давайте посмотрим
Зачем запускать v6
v6
Самая большая причина для запуска —React Hooks
появлениеv6
Напишите код, который будет более компактным и элегантным, чемv5
код
Давайте почувствуем это через код, это псевдокод, v6
написанный
import { Routes, Route, useParams } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="blog/:id" element={<Head />} />
</Routes>
);
}
function Head() {
let { id } = useParams();
return (
<>
<Footer />
</>
);
}
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 (
<Switch>
<Route
path="head/:id"
render={({ match }) => (
<Head id={match.params.id} />
)}
/>
</Switch>
);
}
}
class Head extends React.Component {
render() {
return (
<>
<Footer id={this.props.id} />
</>
);
}
}
class Footer extends React.Component {
render() {
return (
<>
<ButtonComponent id={this.props.id} />
</>
);
}
}
复制代码
Этот пример показывает
Hooks
Устраняет необходимость использования<Route render>
для доступа внутреннему состоянию маршрутизатора- Ручной
props
проход Необходимость распространения этого состояния на дочерние компоненты - Размер пакета приложения меньше
Какие функции были добавлены?
-
<Switch>
обновитесь до<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 => (
<PrivateRoute path={route.path} component={route.component} routes={route.routes} />
);
const routeConfig = routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />);
export default routeConfig;
复制代码
Сейчас
function App() {
let element = useRoutes([
{ path: '/', element: <Home /> },
{
path: 'users',
element: <Users />,
children: [
{ path: '/', element: <UsersIndex /> },
{ path: ':id', element: <UserProfile /> },
{ path: 'me', element: <OwnUserProfile /> },
]
}
]);
return element;
}
复制代码
чувствовать себя более элегантно
useNavigate
заменить наuseHistory
До
import { useHistory } from "react-router-dom";
function App() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
复制代码
Сейчас
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
复制代码
Это не большое изменение
- Изменения маршрута
- 4.1
<Route exact>
Удалить,/*
вместо этого
<Route path="/*" element={<Home />} />
复制代码
`
- 4.2
<Route children>
Использование<Route element>
вместо
import Profile from './Profile';
// v5
<Route path=":userId" component={<Profile />} />
// v6
<Route path=":userId" element={<Profile />} />
复制代码
- 4.3 Outlet Мы используем
<Outlet>
элемент в качестве заполнителя. Как компонент отображает свои дочерние маршруты в<Outlet>
этом случае. Следовательно, элемент orUsers
будет<Outlet>
отображаться<UserProfile>
<OwnUserProfile>
- 4.4
import {
BrowserRouter,
Routes,
Route,
Link,
Outlet
} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />}>
<Route path="/" element={<UsersIndex />} />
<Route path=":id" element={<UserProfile />} />
<Route path="me" element={<OwnUserProfile />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Users() {
return (
<div>
<nav>
<Link to="me">My Profile</Link>
</nav>
<Outlet />
</div>
);
}
复制代码
опыт 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
并将 <APP>
包装在 <BrowserRouter>
// 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(
<BrowserRouter>
<App />
</BrowserRouter>,
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 (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</div>
);
}
复制代码
现在,仍在 src/App.js
,创建你的路由组件
// src/App.js
function Home() {
return (
<>
<main>
<h2>Home</h2>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
function About() {
return (
<>
<main>
<h2>About</h2>
</main>
<nav>
<Link to="/">Home</Link>
</nav>
</>
);
}
复制代码
运行 npm start
,您应该会看到 Home
标识
如何升级 v6
官方的迁移指南在这里:React Router v6 迁移指南
参考文章
结语
如果你正在用 Hook
重构你的应用,我的建议是可以尝试
重要的事
如果你觉得这篇内容对你挺有启发,别忘记点赞 + 关注
欢迎添加我的个人微信:Jiang9684,一起交流前端技术
我的博客地址