react-router-domの基本的な使用法

パッケージ
npmのインストールreact-router-domのインストール

インポートとは、react-router-domのいくつかの組み込みコンポーネントの使用法と機能を指します

import {
    
    
   BrowserRouter as Router,//BrowserRouter 使用as 别名叫（Router）在最外层包裹，项目里只需要用一次
   Switch,//匹配对应的Router 用法 包裹在Router的外面
   Route,//有path属性 用来匹配浏览器中的路径 根据路径加载对应的组件
   Link,//相当于vue中的router-link 可以实现路径的变化
   Redirect,//从当前路由重定向到目标路由
   NavLink
} from 'react-router-dom'

BrowserRouter as Router：キーワードとして、インポートされた変数の新しい名前を設定するために使用されます
BrowserRouter：最も外側のコンポーネントは、ルート、リンクを配置するために使用されるコンテナーとして理解できます。ノードは1つだけです。
HashRouter：ルーティングシステムのルートノード。1つだけ存在する必要があります
スイッチ：ルートをラップし、現在のアクセスアドレスに一致するルートに一致します。その子要素はルートまたはリダイレクトのみになります。機能は1つのルートのみに一致します。一致が成功する限り、一致し続けることはありません。
ルート：ルートとページの間の1対1の対応。ブラウザのパスを照合するために使用されます
リンク：リンクと同等、ルートジャンプ

  <Route path="/home" component={
    
    Home} />
  <Route path="/detail" render={
    
    ()=>Detail} />

パス：パス
コンポーネント：パスマッチングコンポーネント
正確：完全に一致するかどうか
render：仮想domを返します。関数はコンポーネントに似ていますが、より柔軟で、一致したコンポーネントにパラメーターを渡すことができます。

リダイレクト

<Redirect from="/" to="/home" />

ルーティングマッチングルール：
デフォルトは包括的マッチングであり、===完全一致ではありません。
合同マッチング：正確な属性

<Route path="/home" component={
    
    Home} exact/>

ルートジャンプ：

宣言型：リンクタグ
プログラムで：
this.props.history.push（ '/ home'）ページジャンプ
this.props.history.replace（ '/ home'）は履歴レコードを残しません
this.props.history.goBack（）はthis.propsを返します
。 history.go（-1）は

ルーティングパラメータ：

宣言型：

 <Link to="/home?id=1"><Link>

プログラマティック：

	this.props.history.push({
    
    
 			pathname:'/home',
 			state:{
    
    
 				id:1
 			}
 	})

渡されたパラメーターを受け取ります：this.props.history.location

ルーティング情報：

履歴：アクセスレコードを管理し、jsモードでルーティングジャンプを提供します
場所：現在の訪問のルーティング情報を提供します
match：現在のルートの一致ステータスを提供します

参照ボス：https：//blog.csdn.net/sakura_zr/article/details/111238784

react-router-domの基本的な使用法

おすすめ