This article brings you the simple usage of react routing (code examples), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What I want is simple and crude routing

I am used to the usage of vue-router routing, but it always feels quite troublesome to use react-router again.

Then encapsulate one yourself

1. When encapsulating multi-level routing ————The file name is 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. Define the routing list object — ——The file name is 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. Mount it globally

4. Use # in the page

1. Column

2. Koala reading front-end team

3. Article details

Posted 21 hours ago

• react.js

• javascript

##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

What I want is simple and crude routingI am used to the usage of vue-router routing, and it always feels quite troublesome to use react-router again. Then encapsulate one yourself1. When encapsulating multi-level routing ————The file name is 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>
}

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 .Use

• 

• ##If you find my article useful to you, please feel free to appreciate it

##Comment                                                                                                     

Default sorting Sort by time

Loading...

Show more comments

The above is the detailed content of Simple usage of react routing (code example). For more information, please follow other related articles on the PHP Chinese website!