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

この記事では、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 サイトの他の関連記事を参照してください。