フロントエンドルーティングとは、さまざまなコンテンツやページに対応するさまざまなルートを表示することです。ルーティングは、ページとコードを適切に管理し、ユーザーエクスペリエンスを向上させるのに役立ちます。ルーティングモードには、ハッシュと履歴の 2 つのモードがあり、通常はハッシュモードが使用されます。反応では、react-router はクロスプラットフォームであり、組み込みの共通コンポーネントと共通フックを備えています。react-router-dom は、react-router に基づいて Link と NavLink を提供し、履歴ライブラリに依存して、ブラウザに適用可能な 2 つの BrowserRouter と HashRouter を提供します. 現在のほとんどのプロジェクトは、react-router-dom を使用しています. この記事では、使用頻度の高さと、私が触れたルーティング内容を紹介します。

1.ルーティングの原則

簡単に言えば、ルーティングは URL アドレスとビューの関係を管理するために使用されます. アドレスはページに表示されるコンテンツに対応します. 以下に示すアドレスはハッシュモード (/#/) です

原理：

1. ビュー (html) を準備する

2.ルーティング用のルートを準備します（オブジェクトにすることができます。キー名はルート名で、値はビューアドレスです）

3. ハッシュアドレスの経路で「ビューアドレス」を取得する

4. 指定されたラベルで、必要なビューページを読み込みます

設計図：ソウルペインター

二、使う

(1) インストール

npm i react-router-dom@5

(2) 輸入

import { ...汎用コンポーネント } from 'react-router-dom'

(3)使用

<ブラウザルーター>

<Route path="path" component={component}></Route>

</BrowserRouter >

3. 一般的なコンポーネント

(1) ブラウザルーター

履歴モードでは、ページジャンプの原則は、pushState と replaceState を使用することです。このパッケージを使用すると、ルートの形式は / として表示され、as で名前を変更できます. 一般的な形式は次のとおりです: BrowserRouter as Router (名前を BrowserRouter から Router に変更)

属性:

ベース名 (文字列): すべての場所のベース URL。アプリはサーバー上のサブディレクトリから提供されます。サブディレクトリとして設定する必要があります。適切な形式のベース名はスラッシュで開始する必要がありますが、スラッシュで終了することはできません。

getUserConfirmation(fn): ナビゲーションを確認するために使用される関数。デフォルトでは window.confirm を使用します。

<ブラウザルーター>

<Route path='/films' component={Films}></Route>

<ルートパス='/ホーム' コンポーネント={ホーム}></ルート>

</ブラウザルーター>

(2) ハッシュルーター

ハッシュモードでのページジャンプの原則は、location.hash と location.replace を使用することです。このパッケージを使用すると、ルーティングの形式が /#/ として表示されます。長くて見苦しいですが、より使用されます

<ハッシュルーター>

<Route path='/films' component={Films}></Route>

<ルートパス='/ホーム' コンポーネント={ホーム}></ルート>

</ハッシュルーター>

注: BrowserRouter と HashRouter の違い

1. 基本原則が異なる

HashRouter は Url のハッシュ値を使用します

BrowserRouter は h5 の履歴 API を使用しますが、これは ie9 以下と互換性がありません

2. path の表現形式が異なる HashRouter には # 記号がある

3. HashRouter はルーティング状態パラメーターへの影響を更新し、BrowserRouter は状態を履歴オブジェクトに保存します。

4. HashRouter を使用して、いくつかのパスエラー関連の問題を解決できます。

(3) ルート

コンポーネントを一致させ、コンポーネントを表示します。つまり、一致が成功した後、コンポーネントはすぐに一致するコンポーネントに置き換えられます。

属性	タイプ	効果
道	スト \| オブジェクト	ルートはパスに一致し、パス属性のないルートは常に一致します
ちょうど	ブール	true の場合、完全なパスの一致 (/home) が必要です。ルートはデフォルトで「含む」(/ および /home) に一致するため、複数のルートを同時に一致させてレンダリングすることができます。
成分	fn \| 成分	React コンポーネントはアドレスが一致した場合にのみレンダリングされ、ルートの小道具も一緒にレンダリングされます
与える	機能	コンポーネントをインラインでレンダリングおよびラップするには、ターゲットコンポーネントを使用して返す必要があります。

<Route path='/films' component={Films} />

また

<Route path="/" exact render={() => { return <IndexPage user={user} /> }} />

注: あいまい一致と完全一致

完全一致の存在により、あいまい一致と完全一致に分けられます。

(4) スイッチ

排他的 (単一) 一致。包括性を使用したくない場合は、js の switch ブランチステートメントに似た Switch を使用します。ラップされたコンポーネントは 1 つに一致し、最後にジャンプします。サイドバーやブートタブでよく使用されます。

属性

タイプ

効果

位置

スト | オブジェクト

通常、このコンポーネントの場所のプロパティは設定しません。

未設定: Switch コンポーネントのサブコンポーネント (通常は Route または Redirect) は、現在のブラウザーの場所を照合基準としてルート照合を実行します。
設定: Switch コンポーネントのサブコンポーネントは、定義された場所に従って一致します

<ハッシュルーター>

{/*Switch は Js の Switch ブランチに似ています。ケースのようにラップされ、常に 1 つに一致し、飛び出すことができます*/}

{/* このように 1 ページを表示することができ、1 ページに複数のページが表示されることはありません */}

<スイッチ>

<Route path='/films' component={Films}></Route>

<ルートパス='/ホーム' コンポーネント={ホーム}></ルート>

</スイッチ>

</ハッシュルーター>

(5) リダイレクト

リダイレクト, ユーザーが / を入力すると, / を見たときに再定義されたページにジャンプするように指定します. ここでは Exact を使用しており, 関数は正確に一致しています. / だけを見た場合にのみリダイレクトされます. あいまい一致、それが含まれている限り/応答します

属性	タイプ	効果
から	弦	から
に	文字列オブジェクト	所在
押す	ブール値	履歴を追加
ちょうど	ブール値	厳密な一致
センシティブ	ブール値	大文字と小文字を区別

<ハッシュルーター>

<Route path='/films' component={Films}></Route>

<ルートパス='/ホーム' コンポーネント={ホーム}></ルート>

{/*あいまい一致*/}

{/* <Redirect from='/' to='/home'/> */}

{/* 完全に一致*/}

<Redirect from='/' to='/home'まさに/>

</ハッシュルーター>

注意: サブルートがない場合は、サブルートを追加することをお勧めしますexact;サブルートがある場合は、exact親ルートではなくサブルーターに追加することをお勧めします;strictただし、があるかどうかについてはバックスラッシュ、通常は無視して構成しないでください

(6) リンク

タグと同等で、react が仮想 DOM を実際の DOM にレンダリングした後、Link コンポーネントもタグにレンダリングされます。これはナビゲーションによく使用されます。

属性	タイプ	効果
に	スト \| obj{パス名:,検索:,ハッシュ:}	ジャンプ先のパスまたはアドレス
交換	ブール	履歴を置き換えるかどうか

<ul>

<リ>

<Link to='/films'>電気影</NavLink>

</li>

<リ>

<Link to='/cimans'>シネマ</NavLink>

</li>

<リ>

<Link to='/home'>我的</NavLink>

</li>

</ul>

(7) ナビリンク

NavLink メソッドは、Link の拡張バージョンと同等です。

属性	タイプ	効果
に	スト \| obj{パス名:,検索:,ハッシュ:}	ジャンプ先のパスまたはアドレス
交換	ブール	履歴を置き換えるかどうか
アクティブなクラス名	力	選択したスタイルを設定します。デフォルト値はアクティブです
アクティブスタイル	オブジェクト	要素が選択されたときに、この要素にスタイルを追加します
ちょうど	ブール	true の場合、結果と完全に一致する場合にのみ、クラスとスタイルが適用されます。
厳しい	ブール	true の場合、場所が現在の URL と一致するかどうかを判断するときに、場所のパス名の後のスラッシュが考慮されます
アクティブです	楽しい	リンクがアクティブ化されているかどうかを判断するための追加ロジックの機能

<ul>

<リ>

<NavLink to='/films'>電気影</NavLink>

</li>

<リ>

<NavLink to='/cimans'>影院</NavLink>

</li>

<リ>

<NavLink to='/home'>我的</NavLink>

</li>

</ul>

(8) withRouter

コンポーネントをでラップするRouteと、react-router3 つのオブジェクトがこのコンポーネントのプロパティにhistory, location, match配置されます。props

// withRouter实现原理: 
// 将组件包裹进 Route, 然后返回
// const withRouter = () => {
//     return () => {
//         return <Route component={Nav} />
//     }
// }

// 这里是简化版
const withRouter = ( Component ) => () => <Route component={ Component }/>
//withRouter的返回值是一个新组件

one ではないもののRouter、参照レコードを前後に移動するためにそれに依存する必要がある場合、それを使用してwithRouter一般的なコンポーネントをルーティングコンポーネントに変換できます。利用シーン：例えば、ページのロゴをクリックしてトップページに戻るとき、withRouterを使って行うことができます。

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom' //引入withRouter

class Header extends Component {

    back = ()=>{
        this.props.history.goBack()
    }

    forward = ()=>{
        this.props.history.goForward()
    }

    go = ()=>{
        this.props.history.go(-2)
    }

    render() {
        console.log('Header组件收到的props是',this.props);
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={this.back}>回退</button>&nbsp;
                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.go}>go</button>
            </div>
        )
    }
}

export default withRouter(Header)

//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
//withRouter的返回值是一个新组件

3. 一般的なフック

It is used in version 5.1 and later, and it can only be used in function components. 使用方法については、4 番目のポイントでパラメーターを渡すときのコードデモンストレーションを参照してください。

(1)使用履歴

History オブジェクトを取得します。プログラムによるナビゲーションのために履歴オブジェクトにアクセスする

//輸入

「react-router-dom」から{useHistory}をインポートします

const Home = () => { return ( <div>Home</div> ) } const Detail = () => {

//使用

const history = useHistory()

console.log("history", history);//履歴オブジェクトを取得します

console.log("Get the current page path", history.location.pathname);//現在のページパスを取得します

//js で取得した以下と一致

console.log(props.location.pathname);

return (
<div>

<-- 使用-->
<button onClick={() => { history.push('/')}}>ホームに戻る</button>
</div>
)
}
function App() { return ( <div className ="アプリ"> <ルーター > <スイッチ> <ルートの正確なパス="/" コンポーネント={ホーム}/> <ルートパス="/詳細/:id" コンポーネント={詳細}/> </ スイッチ> </ルーター> </div> ); }

（二）useLocation

Location オブジェクトを取得します。コンポーネントの各レイヤーでは、場所オブジェクトを簡単に取得できます。V5.1 より前では、props.location を使用する必要があります。より深いコンポーネントについては、使用する必要もありますwithRouter

//輸入

輸入 {

使用場所

「react-router-dom」から。

//使用

const ロケーション = useLocation ()

console.log("場所",場所);

(3)useParams

route パラメータのキーと値のペアのオブジェクトを取得し、現在の <Route> の match.params にアクセスします。V5.1 より前では、ルートパラメーターを取得する必要がありますprops.match。より深いコンポーネントについては、高次コンポーネントも使用する必要がありますwithRouter

// <Route> を配置した match.params
<Router>
<Switch>
<Route path="/:path">
<Home></Home>
</Route>
</Switch>
</Router>

//入手

let { パス } = useParams();

console.log("パス",パス);

(4) useRouteMatch

useRouteMatch、path文字列をパラメーターとして受け入れます。パラメータがpath現在のルートと一致する場合、useRouteMatch は一致オブジェクトを返します。それ以外の場合は null を返します。

useRouteMatch一部の、ルートレベルのコンポーネントではありません。ただし、コンポーネント自体が表示および非表示になっているが、現在のパスに関連している場合は非常に便利です。

たとえば、バックグラウンド管理システムで作業している場合、Web ページのヘッダーはログインページにのみ表示され、ログインが完了した後は表示する必要がない、というシナリオで使用できますuseRouteMatch。

const Home = () => { return ( <div>Home</div> ) } // `/detail/:id` に一致する場合にのみヘッダーコンポーネントが表示されますconst Header = () => { // 現在のパスのみ`/detail/:id` に一致する場合、一致は null ではありません const match = useRouteMatch('/detail/:id') return ( match && <div>Header</div> ) } const Detail = () => { return ( <div>Detail</div> ) } function App() { return ( <div className="App"> <ルーター> <ヘッダー/> <スイッチ> <ルートの正確なパス="/"component={ホーム}/>

<Route exact path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}

(5) useRoutes

ルーティングテーブル。フックは<Routes>useRoutesと機能的に同等ですが、内部では代わりに要素を使用してルートを定義しますJavaScript 对象<Route>

useRoutes()パラメータは配列です。
useRoutesの戻り値は、ルートツリーのレンダリングに使用できる有効な React 要素か、null一致しない要素のいずれかです。
ネストされたルートは子で実装されます。

useRoutes を使用して以下を実現します。

import * as React from "react";
import { useRoutes } from "react-router-dom";

function App() { let element = useRoutes([ { path: "/", element: <Dashboard />, children: [ { path: "messages", element: <DashboardMessages />, }, { path: "tasks" , 要素: <DashboardTasks /> }, ], }, { パス: "チーム", 要素: <AboutPage /> }, ]);

要素を返します。
}

Routes と Route を使用して、次のことを実現します。

<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks /> } />
</Route>
<Route path="about" element={<AboutPage />} />
</Routes>

4. ルーティングパラメータ

v5.x では、パラメーターを取得するためのプログラムによる方法しかありません.v5.1 以降でフックを追加した後、プログラムによる方法を使用して URL によって運ばれるパラメーターを取得するか、フックの方法を使用して取得します (のみ)機能コンポーネント)、前者も明示的なパラメーターの受け渡しになり、後者の 2 つは暗黙的なパラメーターの受け渡しになります。

(1) params パラメータ

1.ルーティングを登録する

//ルート登録

<Route path="/details/:name/:age" component={Details}/>

2.ルーティングジャンプ

//ルーティングジャンプ

<Link to='/details/tom/18'}>详情</Link>

また

<button onClick={()=>{props.history.push('details/tom/18')}}>詳細ページへ</button>

3. 詳細ページでパラメータを取得する

//詳細ページのパラメータを取得

console.log(props.match.params);

また

import { useParams } from "react-router-dom";

const params = useParams();

(2) 検索パラメータ

1.ルーティングを登録する

//ルート登録

<ルートパス="/詳細" コンポーネント={詳細}/>

2.ルーティングジャンプ

//ルーティングジャンプ

<Link to='/details/tom/18'}>详情</Link>

また

<button onClick={()=>{props.history.push('details?name=tom&age=18')}}>詳細ページへ</button>

3. 詳細ページでパラメータを取得する

//詳細ページのパラメータを取得

console.log(props.location.search);//Get ?id=1&age=18,

また

import { useParams } from "react-router-dom";

const params = useParams(); get ?id=1&age=18

上記の 2 つの方法では、得られた検索は urlencoded エンコードされた文字列であり、クエリ文字列を使用してパラメーターをオブジェクトに解析するか、インターセプトされたツール関数を自分でカプセル化する必要があります。

const { 検索 } = props.location

const {数値} = qs.parse(search.slice(1))

(3)状態パラメータ

1.ルーティングを登録する

//ルート登録

<ルートパス="/詳細" コンポーネント={詳細}/>

2.ルーティングジャンプ

//ルーティングジャンプ

<リンク先={ {

        パス名:'/detils',

        州：{

                id:1,

                年齢:18

        }

}} > 詳細ページに移動 </Link>

また

<button onClick={()=>{props.history.push({

パス名:'/詳細',

州：{

id:1,

年齢:18

}

})}}>詳細ページへ</button>

3. 詳細ページでパラメータを取得する

//詳細ページのパラメータを取得

console.log(props.history.location.state);//{id: 1, age: 18}

import { useLocation } from "react-router-dom";

const { 状態 } = useLocation();

console.log(状態);//{ID: 1, 年齢: 18}

反応ルーティング

1.ルーティングの原則

二、使う

(1) インストール

(2) 輸入

(3)使用

3. 一般的なコンポーネント

(1) ブラウザルーター

(2) ハッシュルーター

注: BrowserRouter と HashRouter の違い

(3) ルート

注: あいまい一致と完全一致

(4) スイッチ

(5) リダイレクト

(6) リンク

(7) ナビリンク

(8) withRouter

3. 一般的なフック

(1)使用履歴

（二）useLocation

(3)useParams

(4) useRouteMatch

(5) useRoutes

4. ルーティングパラメータ

(1) params パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

(2) 検索パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

(3)状態パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

おすすめ

反応ルーティング

1.ルーティングの原則

二、使う

(1) インストール

(2) 輸入

(3)使用

3. 一般的なコンポーネント

(1) ブラウザルーター

(2) ハッシュルーター

注: BrowserRouter と HashRouter の違い

(3) ルート

注: あいまい一致と完全一致

(4) スイッチ

(5) リダイレクト

(6) リンク

(7) ナビリンク

(8) withRouter

3. 一般的なフック

(1)使用履歴

（二）useLocation

(3)useParams

(4) useRouteMatch

(5) useRoutes

4. ルーティング パラメータ

(1) params パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

(2) 検索パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

(3)状態パラメータ

1.ルーティングを登録する

2.ルーティングジャンプ

3. 詳細ページでパラメータを取得する

おすすめ

4. ルーティングパラメータ