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

本篇文章给大家带来的内容是关于react路由的简单用法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

我要的是简单粗暴的路由

习惯了 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.在页面中使用

有问题可以留言交流

1. 专栏

2. 考拉阅读前端团队

3. 文章详情

                                           

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

                                                   21 小时前发布                                                                                            

简单粗暴的react路由

• react.js

• javascript

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

                           3                        

                                                                                                                                           

我要的是简单粗暴的路由

习惯了 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.在页面中使用

有问题可以留言交流

• 

• 举报

如果觉得我的文章对你有用，请随意赞赏

你可能感兴趣的

评论                                                    

默认排序                        时间排序

载入中...

显示更多评论

以上是react路由的简单用法（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！