prefácio
Nada para olhar React Routerna documentação, descobri que foi empurrado para a v6.2.2versão, esta versão fez muitas alterações, vamos dar uma olhada
Por que lançar a v6
v6A maior razão para o lançamento éReact Hookso surgimento dev6Escreva um código mais compacto e elegante quev5o código
Vamos sentir isso através do código, este é o pseudo código v6escrito
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();
}
复制代码Este é pseudocódigo v5escrito
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} />
</>
);
}
}
复制代码Este exemplo mostra
HooksElimina a necessidade de usar<Route render>para acessar estado interno do roteador- Passe manual
propsA necessidade de propagar esse estado para componentes filhos - O tamanho do pacote de aplicativos é menor
Quais recursos foram adicionados?
-
<Switch>atualize para<Routes>- Todas as somas dentro das Rotas são relativas. Isso torna o código mais enxuto e mais previsível
- O roteamento é baseado na melhor correspondência, em vez de percorrer em ordem, o que evita erros devido a rotas inacessíveis
- As rotas podem ser aninhadas em um lugar em vez de serem espalhadas por diferentes componentes
-
novo gancho
useRoutesem vez dissoreact-router-config
Antes de:
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;
复制代码Agora
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;
}
复制代码sinta-se mais elegante
useNavigatesubstituir poruseHistory
Antes de
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>
);
}
复制代码Agora
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
复制代码Não é uma grande mudança
- Alterações de rota
- 4.1
<Route exact>Remova, use/*em vez disso
<Route path="/*" element={<Home />} />
复制代码`
- 4.2
<Route children>Usar<Route element>em vez de
import Profile from './Profile';
// v5
<Route path=":userId" component={<Profile />} />
// v6
<Route path=":userId" element={<Profile />} />
复制代码- 4.3 Outlet Usamos um
<Outlet>elemento como placeholder. Como o componente renderiza suas rotas filhas<Outlet>neste caso. Portanto, um elemento ouUsersserá<Outlet>renderizado<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>
);
}
复制代码experiência 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，一起交流前端技术
我的博客地址