模块化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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 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模拟HTTP认证
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python Flask-web表单使用详解
2017/11/18 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Django 自动生成api接口文档教程
2019/11/19 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
公务员年总结的自我评价
2013/10/25 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
预备党员入党感想
2015/08/10 职场文书
2016年感恩节寄语
2015/12/07 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书