Home  >  Article  >  Web Front-end  >  Simple usage of react routing (code example)

Simple usage of react routing (code example)

不言
不言forward
2019-02-28 13:37:123052browse

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

Simple usage of react routing (code example)

4. Use # in the page

Simple usage of react routing (code example)

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







#                                                                                                                                                                                                                             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.js3. Mount globally

##4 .Use

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

Simple usage of react routing (code example)

Simple usage of react routing (code example)

report
  • Simple usage of react routing (code example)

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete