Ce que cet article vous apporte, c'est l'utilisation simple du routage de réaction (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Ce que je veux, c'est un routage simple et brut

Je suis habitué à l'utilisation du routage vue-router, mais il me semble toujours assez gênant d'utiliser à nouveau React-Router.

Ensuite, encapsulez-en un vous-même

1 Cas de l'encapsulation du routage multi-niveaux ————Le nom du fichier est 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. Objet de la liste de routes ————Le nom du fichier est 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 Monter globalement

4. Utilisez

Si vous avez des questions, vous pouvez laisser un message et communiquer

1. colonne

2. Équipe frontale de lecture de Koala

3. Détails de l'article

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ·                                                                                                                                                                                                                                                                                                                                                                                                                    

Publié il y a 21 heures

• react.js

• javascript

36 fois en train de lire                                                              La lecture prend 6 minutes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

Ensuite, encapsulez-en un vous-même

3 Mount

. dans le monde 4. Utilisez Si vous avez des questions, vous pouvez laisser un message

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

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

Rapport

• qui pourraient vous intéresser

• Commentaires
                                                                                                             

Tri par défaut Trier par heure







Chargement...

Afficher plus de commentaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!