模块化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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
layui动态表头的实现代码
Aug 22 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP 断点续传实例详解
2017/11/11 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python中int与str互转方法
2018/07/02 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
校园广播稿100字
2014/10/06 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android