実用的なクイックスタートReactルーティング開発

インストール

インストールするには、次のコマンドを入力します。

// ネプ
npm で react-router-dom をインストールします

//糸
糸を追加 react-router-dom

react-router 関連タグ

react-routerにはよく使われる 8 つのコンポーネントがあります。

輸入 { 
  ブラウザルーター、
  ハッシュルーター、
  ルート、
  リダイレクト、
  スイッチ、
  リンク、
  ナビリンク、
  ルータ付き、
} 'react-router-dom' から

シンプルなルートジャンプ

シンプルな第1レベルのルーティングジャンプを実装する

輸入 { 
    ルーターとしての BrowserRouter、 
    ルート、 
    リンク 
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        <Link to="/home" className="link">ホームページへジャンプ</Link>
        <Link to="/about" className="link">About ページへ移動</Link>
        <ルート パス="/home" コンポーネント={Home}/>
        <ルート パス="/about" コンポーネント={About}/>
      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

効果は以下のとおりです。

要点の要約:

RouteコンポーネントはRouterコンポーネント内になければなりません
Linkコンポーネントのto属性の値は、クリック後にジャンプするパスです。
Routeコンポーネントのpath属性はLinkタグのto属性と一致します。component componentは、 Routeコンポーネントが正常に一致した後にレンダリングされるコンポーネントオブジェクトを表します。

ネストされたルートジャンプ

Reactのルーティングマッチングレベルは適切である

たとえば、 Appコンポーネントでは、ルーティングコンポーネントの一致するパスが 2 つ、つまり/homeと/about設定されています。コードは次のようになります。

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  リンク、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {

  戻る （
    <div className="アプリ">
      <ルーター>
        <Link to="/home">ホームページへ移動</Link>
        <Link to="/about">About ページへ移動</Link>

        <ルート パス="/home" コンポーネント={Home}/>
        <ルート パス="/about" コンポーネント={About}/>                           

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

次に、 Homeコンポーネントで、 /home/oneと/home/twoという 2 つのルーティングコンポーネントの一致するパスも設定します。この時点で、 /home/oneと/home/twoは上位レベルのルート/homeの 2 番目のレベルのネストされたルートであることがわかります。コードは次のとおりです。

'react' から React をインポートします
輸入 {
    ルート、
    リンク、
} 'react-router-dom' から
'./one' から One をインポートします
'./two' から Two をインポートします

関数ホーム() {
    
    戻る （
        <>
            私はホームページです <Link to="/home/one">Home/one ページへ移動</Link>
            <Link to="/home/two">ホーム/2 ページへ移動</Link>

            <ルート パス="/home/one" コンポーネント={One}/>
            <ルート パス="/home/two" コンポーネント={Two}/>
        </>
    ）
}

エクスポートデフォルトホーム

特記事項: Homeコンポーネント内のルーティングコンポーネントOneのセカンダリルートパスマッチングは、 /home/one /oneと記述する必要があります。One OneがHomeコンポーネント内にあるように見えるからといって、それを/oneに省略できると考えないでください。

動的リンク

NavLink 、現在active状態にあるリンクにactiveクラス名を添付できます。次に例を示します。

輸入 { 
    BrowserRouterをルーターとして使用する 
    ルート、 
    ナビリンク 
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        <NavLink to="/home" className="link">ホームページへジャンプ</NavLink>
        <NavLink to="/about" className="link">About ページへ移動</NavLink>
        <ルート パス="/home" コンポーネント={Home}/>
        <ルート パス="/about" コンポーネント={About}/>
      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。
/* アクティブクラスのスタイルを設定します */
。アクティブ {
    フォントの太さ: 黒;
    色: 赤;
}

効果は以下のとおりです。

ルートマッチングの最適化

リダイレクトリンクをクリックすると、図に示すように、 Routeに対応するすべてのパスを自動的に一致させようとします。

通常の状況では、1 つのルールに一致させてレンダリングするだけで済みます。つまり、一致が成功した後は、それ以降の一致を試行する必要はありません。この場合、次に示すように、 Switchコンポーネントを使用できます。

輸入 { 
  BrowserRouterをルーターとして使用する 
  ルート、 
  ナビリンク、
  スイッチ、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        <NavLink to="/home" className="link">ホームページへジャンプ</NavLink>   
        <NavLink to="/about" className="link">About ページへ移動</NavLink>

        <スイッチ>
          <ルート パス="/home" コンポーネント={Home}/>       
          <ルート パス="/about" コンポーネント={About}/>      
          <ルート パス="/home" コンポーネント={Home}/>       
          <ルート パス="/home" コンポーネント={Home}/>        
          *ここでは 1 万個のルート コンポーネントは省略されています*/                  
          <ルート パス="/home" コンポーネント={Home}/>                           
        </スイッチ>

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

効果は以下のとおりです。

要点の要約:

Switchコンポーネントに複数のRouteコンポーネントを配置すると、意味のない複数のルートの一致を回避し、パフォーマンスを向上させることができます。

リダイレクト

ページがジャンプするときに、ジャンプリンクがどのRouteコンポーネントとも一致しない場合は404ページが表示されるため、リダイレクトコンポーネントRedirect必要になります。コードは次のとおりです。

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
  リダイレクト、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        <NavLink to="/home" className="link">ホームページへジャンプ</NavLink>   
        <NavLink to="/about" className="link">About ページへ移動</NavLink>
        <NavLink to="/shop" className="link">ショップページへジャンプ</NavLink> {/* クリックすると /shop へジャンプしますが、パスが設定されていません*/

        <スイッチ>
          <ルート パス="/home" コンポーネント={Home}/>       
          <ルート パス="/about" コンポーネント={About}/>      
          <Redirect to="/home" />{/* 上記のすべてのルートコンポーネントが一致しない場合は、/home にリダイレクトします */                    
        </スイッチ>

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

効果は以下のとおりです。

ルーティングパラメータ

ルートによって渡されるすべてのパラメータは、ジャンプルートコンポーネントのpropsで取得されます。パラメータを渡す各メソッドは、わずかに異なる方法でパラメータを受け取ります。

ルーティングを通じてパラメータを渡す方法は 3 つあります。 1 つずつ見ていきましょう。

最初

1 つ目は、 Linkコンポーネントのジャンプパスでパラメータを渡し、 Routeコンポーネントの一致するパスでパラメータ名を通じてパラメータを受け取ることです:參數名コードは次のとおりです。

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        パス /home には、Zhang San と 18* の 2 つのパラメータがあります。
        <NavLink to="/home/张三/18" className="link">ホームページへジャンプ</NavLink>   
        <NavLink to="/about" className="link">About ページへ移動</NavLink>

        <スイッチ>
          */home の一致するパスの同じ場所で名前と年齢のパラメータを受け取ります*/
          <ルート パス="/home/:name/:age" コンポーネント={Home}/>       
          <ルート パス="/about" コンポーネント={About}/>                           
        </スイッチ>

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

ルーティングコンポーネントのpropsジャンプして印刷してみる

ご覧のとおり、最初のメソッドのパラメータはprops.match.paramsを通じて取得されます。

2番目

2 番目の方法は、 ?a=1&b=3のように、 Linkコンポーネントのジャンプリンクの後に?で始まるパラメータを渡すことです。コードは次のとおりです。

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        ジャンプパスの後に、? で始まる 2 つのパラメータを渡します。つまり、name=张三、age=18 */
        <NavLink to="/home?name=张三&age=18" className="link">ホームページへジャンプ</NavLink>   
        <NavLink to="/about" className="link">About ページへ移動</NavLink>

        <スイッチ>
          ここで受信操作を行う必要はありません*/
          <ルート パス="/home" コンポーネント={Home}/>       
          <ルート パス="/about" コンポーネント={About}/>                           
        </スイッチ>

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

ルーティングコンポーネントのpropsジャンプして印刷してみる

ご覧のとおり、2 番目のメソッドのパラメーターはprops.location.searchを通じて取得されますが、ここでのパラメーターは自分でさらに変換する必要があるため、ここでは詳しく説明しません。

3番目

3 番目の方法は、 Linkコンポーネントのto jump プロパティをオブジェクトの形式で記述し、 stateプロパティを通じてパラメータを渡すことです。コードは次のとおりです。

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        {/* to 属性をオブジェクトの形式で記述し、パス属性の名前は pathname、パラメータ属性の名前は state です */
        <NavLink to={{pathname: "/home", state: {name: '张三', age: 18}}} className="link">ホームページへジャンプ</NavLink>   
        <NavLink to="/about" className="link">About ページへ移動</NavLink>

        <スイッチ>
          ** ここで属性を特に受け取る必要はありません*/
          <ルート パス="/home" コンポーネント={Home}/>       
          <ルート パス="/about" コンポーネント={About}/>                           
        </スイッチ>

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

ルーティングコンポーネントのpropsジャンプして印刷してみる

ご覧のとおり、3番目のメソッドのパラメータはprops.location.stateを通じて取得されます。

機能ルーティング

上記は主にreact-router-domのLinkコンポーネントを介して特定のルーティングコンポーネントにジャンプします。

しかし、関数を呼び出していつでもどこでもルートをジャンプするなど、より柔軟なルートジャンプ方法が必要になる場合があります。これを機能ルーティングと呼びます。

機能ルーティングで使用されるメソッドは5あります (下のスクリーンショットはルーティングコンポーネントのpropsからのものです)

ここに画像の説明を挿入

メソッドはpush 、 replace 、 goForward 、 goBack 、 goの5です。次に、これらのメソッドを順番に紹介します。

押す

push方式は、ページを対応するパスにジャンプし、ブラウザに記録を残す（つまり、ブラウザの戻るボタンで前のページに戻ることができる）

たとえば、ルーティングコンポーネントHomeにbuttonを設定し、それをクリックしてpushメソッドを呼び出して/aboutページにジャンプします。

'react' から React をインポートします

関数ホーム（props）{

    pushLink = () => { とします。
        props.history.push('/about')
    }
    
    戻る （
        <div クラス名="a">
            ホーム ページにいます <button onClick={pushLink}> About ページへ移動 </button>
        </div>
    ）
}

エクスポートデフォルトホーム

ジャンプ効果は以下のとおりです。

ご覧のとおり、 pushメソッドを経由した後、ブラウザの戻るボタンで前のページに戻ることができます。

交換する

replaceメソッドはpushメソッドと似ていますが、ジャンプ後に前のページの記録がブラウザに保存されない点が異なります（つまり、ブラウザの戻るボタンで前のページに戻ることはできません）。

コードを変更する

'react' から React をインポートします

関数ホーム（props）{

    replaceLink = () => { とします。
        props.history.replace('/about')
    }
    
    戻る （
        <div クラス名="a">
            ホーム ページにいます <button onClick={replaceLink}> About ページへ移動 </button>
        </div>
    ）
}

エクスポートデフォルトホーム

ジャンプ効果は以下のとおりです。

ご覧のとおり、最初のパスは「/」で、次に「/home」にジャンプし、ボタンをクリックして、 replaceメソッドを通じて/aboutページにジャンプします。最後に、ブラウザの戻るボタンから/ページに戻りましたが、中央の/homeブラウザの記録に保存されていないことがわかりました。

前進

goForwardメソッドを呼び出すことは、次の図に示すように、ブラウザの次のページに戻るボタンをクリックすることと同じです。

ここでこれ以上のデモンストレーションは行いません。

戻る

goBackメソッドを呼び出すことは、次の図に示すように、ブラウザのボタンをクリックして前のページに戻ることと同じです。

ここに画像の説明を挿入

行く

名前が示すように、 goメソッドは指定されたパスにジャンプするために使用されます。

このメソッドは、次のように 1 つのパラメータ (パラメータタイプはNumber ) を受け入れます。

パラメータが正の数nの場合、次のnページにジャンプすることを意味します。たとえば、 go(1) goForwardメソッドを1回呼び出すことと同じです。
パラメータが負の数nの場合、前のnページにジャンプすることを意味します。たとえば、 go(-3) goBackメソッドを 3 回呼び出すことと同じです。
パラメータが0の場合、現在のページを更新することを意味します

共通コンポーネントはルーティングを使用する

ここでは、通常のコンポーネントとルーティングコンポーネントという2つの概念があります。

Routeコンポーネントによってレンダリングされるコンポーネントはルーティングコンポーネントであり、残りは基本的に通常のコンポーネントです。

たとえば、次のコードでは、 Homeコンポーネントはルーティングコンポーネントであり、 Appコンポーネントは通常のコンポーネントです。

輸入 {
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
} 'react-router-dom' から
'./home' から Home をインポートします。

デフォルト関数App()をエクスポートする{
  
  戻る （
    <div className="アプリ">
      <ルーター>
        <NavLink to='/home' className="link">ホームページへジャンプ</NavLink>   

        <スイッチ>
          <ルート パス="/home" コンポーネント={Home}/>                              
        </スイッチ>

      </ルーター>
    </div>
  );
}

そして、ルーティングコンポーネントと通常のコンポーネントの最大の違いは、コンポーネントのprops属性に次の図に示す内容が含まれているかどうかです。(前者は含まれていますが、後者は含まれていません)

この時点で、 react-router-dom withRouterメソッドを提供しており、これにより通常のコンポーネントがルーティングコンポーネントと同じメソッドやデータを持つことができるようになります。

使い方は次のとおりです:

輸入 { 
  ルーターとしての BrowserRouter、 
  ルート、 
  ナビリンク、
  スイッチ、
  withRouter, // 1. witRouterを導入する
} 'react-router-dom' から
'./about' から About をインポートします

関数App(props) {

  console.log(props); // 3. 通常のコンポーネント App の props を出力してみると、props にすでにコンテンツが含まれていることがわかります。つまり、通常のコンポーネントもルーティング コンポーネントと同じ機能を持つことができます。 return (
    <div className="アプリ">
      <ルーター>
        <NavLink to="/about" className="link">About ページへ移動</NavLink>

        <スイッチ>
          <ルート パス="/about" コンポーネント={About}/>                           
        </スイッチ>

      </ルーター>
    </div>
  );
}

export default withRouter(App); // 2. withRouterメソッドを使用して通常のコンポーネントをラップする

補充する

交換する

機能ルーティングには、 pushとreplace 2 つの主なジャンプタイプがあります。非機能ルーティングでは、ジャンプタイプをカスタマイズすることもできます。具体的な実装コードは次のとおりです。

輸入 { 
    BrowserRouterをルーターとして使用する 
    ルート、 
    リンク 
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {
  戻る （
    <div className="アプリ">
      <ルーター>
        <Link to="/home" className="link">ホームページへジャンプ</Link>
        <Link to="/about" className="link">About ページへ移動</Link>

        <Route path="/home" component={Home} replace={true}/> {/* replace は true、ジャンプ タイプは replace です */
        <Route path="/about" component={About} replace={false}/> {/* replace は false、ジャンプ タイプは push */
      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。
Route コンポーネントには、リダイレクト タイプを設定できる replace 属性があります。値が true の場合、リダイレクト タイプは replace になり、値が false の場合、リダイレクト タイプは push になります。

発掘

デフォルトのルートマッチングはあいまいマッチングです。例:

輸入 { 
  BrowserRouterをルーターとして使用する 
  ルート、 
  リンク、
} 'react-router-dom' から
'./home' から Home をインポートします。
'./about' から About をインポートします

関数App() {

  戻る （
    <div className="アプリ">
      <ルーター>
        <Link to="/home/abc">ホームページにジャンプ</Link>{/* /home/abc にジャンプしますが、home の下に abc ルーティング コンポーネントはありません*/
        <Link to="/about/abc">About ページへジャンプ</Link>{/* /about/abc へジャンプしますが、ホームの下に abc ルーティング コンポーネントはありません*/

        <Route path="/home" component={Home} />{/* ルートのマッチングルールは /home で、正確な属性は設定されておらず、現在の一致はあいまいです*/
        <Route path="/about" component={About} exact/> {/* ルートのマッチングルールは /about で、exact 属性が設定されており、現在の一致は exact です*/

      </ルーター>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

効果は以下のとおりです。

図からわかるように、 /home/abcにジャンプする場合、最初のRouteコンポーネントはあいまい一致であるため、最初に/homeに一致し、 Homeコンポーネントがレンダリングされます。一方/about/abcにジャンプする場合、2 番目のRouteコンポーネントは完全一致であるため、 /about/abc /aboutと等しくないため、 Aboutコンポーネントもレンダリングされません。