この記事では、react routing の簡単な使用法 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。
私が望むのはシンプルで粗雑なルーティングです
vue-router ルーティングの使用には慣れていますが、再度 React-router を使用するのはいつも非常に面倒に感じます。
次に、自分でカプセル化します。
1. マルチレベル ルーティングをカプセル化する場合、ファイル名は routerView.js
import React from 'react'; import {Switch, Redirect, Route} from 'dva/router'; export default (props)=>{ return{ props.routes.map((item, index)=>{ console.log(item.path); return }{ if (item.children){ return }) }}else{ return } }}> }
2 です。ルーティング リスト オブジェクトを定義します。 ——ファイル名は、index.js
import React from 'react'; // 一级路由 import Tab from '../routes/TabPage'; import Detail from '../routes/Detail'; // 二级路由 import Rank from '../routes/RankPage'; import Search from '../routes/SearchPage' import Index from '../routes/IndexPage'; export default { routes: [{ path: '/tab', component: Tab, children: [{ path: '/tab/index', component: Index }, { path: '/tab/rank', component: Rank }, { path: '/tab/search', component: Search }] }, { path: "/detail", component: Detail }] }
3 です。
## をページ内で使用してグローバルにマウントします。
#ご質問がございましたら、メッセージを残してください。
21時間前に投稿#シンプルで粗雑な反応ルーティング
私が欲しいのはシンプルで粗雑なルーティングですvue-router ルーティングの使用に慣れているので、再び React-router を使用するのはいつも非常に面倒に感じます。次に、自分でカプセル化します。1. マルチレベル ルーティングをカプセル化する場合、ファイル名は routerView.js
import React from 'react'; import {Switch, Redirect, Route} from 'dva/router'; export default (props)=>{ return{ props.routes.map((item, index)=>{ console.log(item.path); return }{ if (item.children){ return }) }}else{ return } }}> }
import React from 'react'; // 一级路由 import Tab from '../routes/TabPage'; import Detail from '../routes/Detail'; // 二级路由 import Rank from '../routes/RankPage'; import Search from '../routes/SearchPage' import Index from '../routes/IndexPage'; export default { routes: [{ path: '/tab', component: Tab, children: [{ path: '/tab/index', component: Index }, { path: '/tab/rank', component: Rank }, { path: '/tab/search', component: Search }] }, { path: "/detail", component: Detail }] }
#私の記事が役に立つと思われる場合は、どうぞお気軽に評価してください興味があるかもしれません
####### ##コメント###
## ##################################
以上がReact ルーティングの簡単な使用法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。