ホームページ > ウェブフロントエンド > jsチュートリアル > React Router 4.0 以降でルーティングを適用する方法

React Router 4.0 以降でルーティングを適用する方法

小云云
リリース: 2018-02-07 10:53:31
オリジナル
1218 人が閲覧しました

この記事では、React Router 4.0 以降のルーティング アプリケーションの詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

4.0 より前の React Router では、ネストされたルートを次の形式で Router タグに配置でき、ネストされたルートも直接一緒に配置されます。


<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   <Route path="users/:userId" component={Profile} />
  </Route>
</Route>
ログイン後にコピー

しかし、4.0 以降では、ネストされたルーティングは以前とは完全に異なります。ルーティングを処理するには、ネストされたルート コンポーネントに個別に配置する必要があります。そうしないと、常に次の警告が表示されます:

と <ルート子>

正しい形式は次のとおりです


<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   //<Route path="users/:userId" component={Profile} />
  </Route>
</Route>
ログイン後にコピー

上記はネストされたルーティングを必要とするコンポーネントです新しいルート

ネストされたルーティングの完全な例は次のとおりです


手順と注意事項

1. 次のコードは ES6 形式です

2。
3. HashRouter などの履歴の使用に注意してください。そうでないと、常に警告が表示され、レンダリングできません


const Users = ({ match }) => (
 <p>
  <h2>Topics</h2>
  <Route path={`${match.url}/:userId`} component={Profile}/>
 </p>
)
ログイン後にコピー

関連推奨事項:


vue ルーターの動的ルーティングとネストされたルーティングの例の詳細な説明


ルーティングを利用する Angularモジュールメソッドの遅延読み込み

ルーティング機能のVue-Router2実装例解説

以上がReact Router 4.0 以降でルーティングを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート