react路由的简单用法（代码示例）

来源：动视网责编：小采时间：2020-11-27 19:27:24

react路由的简单用法（代码示例）

react路由的简单用法（代码示例）:本篇文章给大家带来的内容是关于react路由的简单用法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我要的是简单粗暴的路由习惯了 vue-router 路由的用法，再用react-router总感觉挺麻烦的。那么就自己封装一个吧1.封装多

推荐度：

点击下载本文 文档为doc格式

导读react路由的简单用法（代码示例）:本篇文章给大家带来的内容是关于react路由的简单用法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我要的是简单粗暴的路由习惯了 vue-router 路由的用法，再用react-router总感觉挺麻烦的。那么就自己封装一个吧1.封装多

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 path={item.path} key={index} render={(props)=>{
 if (item.children){
 return <item.component {...props} routes={item.children}></item.component>
 }else{
 return <item.component {...props}></item.component>
 }
 }}></Route>
 })
 }<Redirect from="/" exact to="/tab/index"></Redirect>
 }</Switch>
}

2.定义路由列表对象 ————文件名为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.在全局挂载

4.在页面中使用

有问题可以留言交流

bug不是我的错 11 发布于考拉阅读前端团队

21 小时前发布

简单粗暴的react路由

react.js

javascript

36 次阅读 · 读完需要 6 分钟

我要的是简单粗暴的路由

习惯了 vue-router 路由的用法，再用react-router总感觉挺麻烦的。

那么就自己封装一个吧

1.封装多级路由的情况 ————文件名为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 path={item.path} key={index} render={(props)=>{
 if (item.children){
 return <item.component {...props} routes={item.children}></item.component>
 }else{
 return <item.component {...props}></item.component>
 }
 }}></Route>
 })
 }<Redirect from="/" exact to="/tab/index"></Redirect>
 }</Switch>
}

2.定义路由列表对象 ————文件名为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.在全局挂载

4.在页面中使用

有问题可以留言交流