模块化react-router配置方法详解


Posted in Javascript onJune 03, 2019

react-router模块化配置

因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。

直接进入主题,配置react-router模块化

1.先下载react-router-dom

npm install react-router-dom --save

2.在相应的文件引入react-router-dom相应的模块

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

3.在src子创建一个module目录,接着在module目录在创建一个router.js文件,用来配置路由。

//router.js
import Index from '../components/Index'
import New from '../components/New'
  import NewList from '../components/NewList'
  import NewContent from '../components/NewContent'
  
const routes = [
  
  {
    path:"/",
    component:Index,
    exact:true
  },
  {
    path:"/new",
    component:New,
    routes:[
      {
        path:"/new/",
        component:NewContent
      },
      {
        path:"/new/newList",
        component:NewList
      }
    ]
  },
  
]

export default routes

4.在app.js根目录添加相应的跳转路径。

//app.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import router from "./modules/routers"

function App() {
 return (
  <Router>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/new">新闻</Link>
          </li>
        </ul>
      </nav>
      {
        router.map((router,index)=>{
          
            if(router.exact){
              
              return <Route exact key={index} path={router.path}
                render = {
                  props =>(
                    <router.component {...props} routes = {router.routes}/>
                  )
                }
              />
              
            }else{
              
              return <Route key={index} path={router.path}
                render = {
                  props =>(
                    <router.component {...props} routes = {router.routes} />
                  )
                }
              />
              
            }
          
        })
      }
    </Router>
 );
}

export default App;

注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇

注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇

注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇

解析一下,<Route/>里面的render,这是官方给出的一种固定写法,为了解决父路由传递数据给子路由接受不到的问题。render是一个对象,里面是一个箭头函数,箭头函数放回<router.component {...props} routes = {router.routes} />一个标签,router.component的router对于的是你map传进来的那个形参,传啥写啥;component 是配置文件对应的component ,routes 是传给子路由的数据、(子路由通过this.props.routes 接收)

5.在有子路由的页码配置跳转

import React ,{Component} from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class New extends Component{
  
  render(){
    
    return(
      
      <div className="box">
        <div className="left">
          <ul>
            <li>
              <Link to="/new">New</Link>
            </li>
            <li>
              <Link to="/new/newList">NewList</Link>
            </li>
          </ul>
        </div>
        <div className="right">
          {
            this.props.routes.map((item,index)=>{
              
              return <Route key={index} exact path={item.path} component={item.component}></Route>
              
            })
          }
        </div>
      </div>
      
    )
    
  }
  
}

export default New

最后的结果为:

模块化react-router配置方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
更正确的asp冒泡排序
May 24 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
react 组件传值的三种方法
Jun 03 #Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 #Javascript
Node.js 的 GC 机制详解
Jun 03 #Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 #Javascript
react-native滑动吸顶效果的实现过程
Jun 03 #Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 #Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 #Javascript
You might like
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
自荐书格式
2013/12/01 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
学生感冒英文请假条
2014/02/04 职场文书
顶撞老师检讨书
2014/02/07 职场文书
研发工程师岗位职责
2014/04/28 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Mysql数据库命令大全
2021/05/26 MySQL