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

この記事では、react routing の簡単な使用法 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

私が望むのはシンプルで粗雑なルーティングです

vue-router ルーティングの使用には慣れていますが、再度 React-router を使用するのはいつも非常に面倒に感じます。

次に、自分でカプセル化します。

1. マルチレベル ルーティングをカプセル化する場合、ファイル名は routerView.js

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return <switch>{
    props.routes.map((item, index)=>{
      console.log(item.path);
      return <route>{
        if (item.children){
          return <item.component></item.component>
        }else{
          return <item.component></item.component>
        }
      }}></route>
    })
  }<redirect></redirect>
  }</switch>
}

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 です。

## をページ内で使用してグローバルにマウントします。

#ご質問がございましたら、メッセージを残してください。

列

1. Koala reading フロントエンド チーム

2. 記事の詳細

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

21時間前に投稿 #シンプルで粗雑な反応ルーティング

react.js
javascript
36 読書                                                             読むのに 6 分かかります                                                   

#                                                                                    

                                                                                                                                                                                                                                                                                                                                                                                 

私が欲しいのはシンプルで粗雑なルーティングですvue-router ルーティングの使用に慣れているので、再び React-router を使用するのはいつも非常に面倒に感じます。 次に、自分でカプセル化します。1. マルチレベル ルーティングをカプセル化する場合、ファイル名は routerView.js

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return <switch>{
    props.routes.map((item, index)=>{
      console.log(item.path);
      return <route>{
        if (item.children){
          return <item.component></item.component>
        }else{
          return <item.component></item.component>
        }
      }}></route>
    })
  }<redirect></redirect>
  }</switch>
}

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 です。

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

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

#私の記事が役に立つと思われる場合は、どうぞお気軽に評価してください興味があるかもしれません

• ＃＃＃＃＃＃＃ ＃＃コメント＃＃＃                                                                                                     

  デフォルトの並べ替え 時間順に並べ替え

  
  

  
  

  読み込み中...

  コメントをさらに表示

  ## ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がReact ルーティングの簡単な使用法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。