React ルーティングの簡単な使用法 (コード例)-jsチュートリアル-php.cn

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

React ルーティングの簡単な使用法 (コード例) ## をページ内で使用してグローバルにマウントします。

React ルーティングの簡単な使用法 (コード例) #ご質問がございましたら、メッセージを残してください。

列

# にポストするコアラはフロントエンドチームを読んでいます

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  } }}> }) } } }

ログイン後にコピー

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 }] }

ログイン後にコピー

##4 を使用して、グローバルにマウントします。ご質問がある場合は、このページにメッセージを残してください。

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃報告＃＃＃＃＃＃＃

React ルーティングの簡単な使用法 (コード例)

#私の記事が役に立つと思われる場合は、どうぞお気軽に評価してください React ルーティングの簡単な使用法 (コード例) 興味があるかもしれません