序文
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>
- ルート内のすべての合計は相対的です。これにより、コードがよりスリムになり、予測可能になります
- ルーティングは、順番にトラバースするのではなく、最適な一致に基づいており、到達不能なルートによるエラーを回避します。
- ルートは、異なるコンポーネントに分散する代わりに、1つの場所にネストできます
-
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>
この場合Users
、コンポーネントが子ルートをレンダリングする方法。したがって、 or要素は現在の位置に基づいて<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,一起交流前端技术
我的博客地址