react-routerv6
最近、同社のプロジェクトでこれを利用しましたが、オンラインリソースが少なく、お金でしか見られないものもあるので、覚えておくのも新しいので、みんなで共有できるように書き留めておきました。違う。
1 useNavigate2
ルートコンポーネントが要素になります
3新しいルートuseRoutes4
ナビゲートがリダイレクトに置き換わります
5スイッチがルートになり
ます。。。。
useNavigate
useHistoryの6番目のバージョンはuseNavigateに置き換えられ、Navigateから一部のURLアドレスを取得できません。印刷して
印象があるかどうかを確認できます。印刷された以前の履歴はオブジェクトですが、慌てる必要はありません。別のAPIuseLocationを使用して取得できます
ルート
以前のスイッチで、名前を変更しただけです。
ルート
これにおける最大の変更は、コンポーネントとレンダリングを要素に変換することです。
これはv5の使用法です
。V6を見
てコンポーネントを直接書き込むと、v5のように子を渡す代わりに、割り当てを通じてデータをコンポーネントに直接渡すことができます。 。関数を記述して、に渡します。
useRoutes
これにより、Reactはvue-routerと同じくらい便利なルートを作成できます。
使用法を見てみましょう：
注意してください。ここの要素は中かっこで囲む
必要はなく、ここのパスを追加する必要もありません。ネストされている場合でも、親ルートパスを記述する必要はありません。これは、以前に使用したものよりもはるかに優れています。以前は関数をカプセル化していたのですが、前回の記事でそれについて書きました。
ここでのコンポーネントは遅延読み込みを
使用します。それらを使用する場合は、ルートをdivで直接ラップできます。
次に、ルーティングの複数のレイヤーがある新しいもの、つまりOUTLETを導入するだけで、
それをprops.childrenとして扱います。そうすれば、別の設計を行う必要がなくなり、非常に便利です。以前の方法よりも便利
https://blog.csdn.net/lin_fightin/article/details/113605309（前のブログ）
前の方法と比較してください
配列オブジェクトを自分で記述してから、関数をカプセル化します。
import React from "react";
import {
Switch, Route, Redirect } from "react-router-dom";
const RenderRoutes = (props) => {
const {
routes, redirect } = props;
return (
<Switch>
{
redirect && (
<Route
exact
path={
redirect.to}
component={
() => {
return <Redirect to={
redirect.jump} />;
}}
/>
)}
{
routes &&
routes.map((route) => {
return (
<Route
path={
route.path}
key={
route.key}
exact={
!!route.exact}
children={
(props) => {
return <route.component route={
route} {
...props} />;
}}
/>
);
})}
</Switch>
);
};
使用的时候
`import React from 'react'
import {
BrowserRouter} from 'react-router-dom'
import RenderRoutes from './routerRender'
import routes from './routes'
function BaseRouter(){
return <BrowserRouter>
<React.Suspense fallback={
<div>loading....</div>}>
<RenderRoutes redirect={
{
to:'/',jump:'/discover'}} routes={
routes}></RenderRoutes>
</React.Suspense>
</BrowserRouter>
}
export default BaseRouter`
export default RenderRoutes;
この処理は上記のような効果を達成できますが、特にルーティングネスティングの親コンポーネントでは
、図に示すように、より面倒です。
また、カプセル化した関数をインポートして別の処理レイヤーを実行する必要があり、新しいAPIuseRoutesを使用する必要はありません。
ナビゲーター
リダイレクト、リダイレクトが削除されたようですが、これを使用してリダイレクトします。これは、リダイレクトの使用法とは少し異なります。
以前の使用法：
現在：図に示すように、通常はuseRoutesと連携します。localhost
：3000と入力すると、後でパラメータを追加しないでください。スキップして検出/推奨
します
。これにナビゲートすることはできないことに注意してください。エラーが報告されます。