Simple usage of react routing (code example)

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

##If you have any questions, please leave a message

1. Column

2. Koala reading front-end team

3. Article details

#                                                                                                                                                                                                                             to                                                                                                                                                                                                 posted on                                                                                                                                                                                                                      Koala Reading Front-End Team                                                                                                                                                                                                                                                                                                                                                                                                                                                   

Posted 21 hours ago

Simple and crude react routing

• react.js

• javascript

36 Reading                                                             It takes 6 minutes to read                                                                                                                        

##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

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

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 globally

##4 .Use

on the page. If you have any questions, you can leave a message to communicate.

report

• 

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

You may be interested

##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!