ホームページ  >  記事  >  ウェブフロントエンド  >  React Router4.0以降でルーティングを使用する方法

React Router4.0以降でルーティングを使用する方法

小云云
小云云オリジナル
2018-02-03 14:51:002350ブラウズ

この記事では、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>
)

関連推奨事項:


react-router4 webpack require.ensure と連携して非同期を実現します読み込み中


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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。