Utilisation simple du routage de réaction (exemple de code)-js tutoriel-php.cn

Utilisation simple du routage de réaction (exemple de code)

不言

Libérer： 2019-02-28 13:37:12

avant

3032 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

3 Monter globalement

Utilisation simple du routage de réaction (exemple de code)

4. Utilisez

Utilisation simple du routage de réaction (exemple de code)

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

Publié il y a 21 heures

Routage de réaction simple et brut

Je veux un itinéraire simple et grossier

L'utilisation de la route Vue-Router, et puis je me sens toujours très gênant d'utiliser React-Router.

Ensuite, encapsulez-en un vous-même

1 Cas de l'encapsulation du routage multi-niveaux ————Le nom du fichier est routerView.js2. Objet de la liste de routes ————Le nom du fichier est index.js

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

Copier après la connexion

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

Copier après la connexion

Rapport

Utilisation simple du routage de réaction (exemple de code)

Si vous pensez que mon article vous est utile, N'hésitez pas à apprécier les