Einfache Verwendung von React Routing (Codebeispiel)

Was dieser Artikel Ihnen bringt, ist die einfache Verwendung von React Routing (Codebeispiele). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Was ich möchte, ist einfaches und grobes Routing

Ich bin an die Verwendung von Vue-Router-Routing gewöhnt, aber es fühlt sich immer mühsam an, React-Router erneut zu verwenden.

Dann kapseln Sie eines selbst

1. Beim Kapseln von mehrstufigem Routing ————Der Dateiname lautet 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. Definieren Sie das Routenlistenobjekt. ——Der Dateiname ist 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. Global bereitstellen

4

Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht

Spalte
Kaola liest Front-End-Team
Artikeldetails

                                                                                                                                                                                                                                          

Der Fehler ist nicht meine Schuld

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ·                                                                                                                                                                                                                                                                                                                                                                                                  

                                                        

Einfaches und grobes React-Routing

• react.js

• Javascript

36 Mal gelesen                                                             Das Lesen dauert 6 Minuten                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

Ich möchte eine einfache unhöfliche Route

Die Verwendung der Vue-Router-Route, und dann fühle ich mich immer sehr mühsam, React-Router zu verwenden.

Dann kapseln Sie eines selbst

1. Beim Kapseln von mehrstufigem Routing ————Der Dateiname lautet 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. Definieren Sie das Routenlistenobjekt. ——Der Dateiname ist 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. Global bereitstellen

4 .Verwenden Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen

Bericht

Wenn Sie meinen Artikel nützlich für Sie finden, zögern Sie bitte nicht um es zu schätzen

• Sie könnten interessiert sein

• Kommentare
                                                                                                       

Standardsortierung Nach Zeit sortieren







Laden...

Weitere Kommentare anzeigen

Das obige ist der detaillierte Inhalt vonEinfache Verwendung von React Routing (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!