模块化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 相关文章推荐
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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 转义使用详解
2013/07/15 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
[转]JS宝典学习笔记
2007/02/07 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript工具库代码
2012/03/29 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
js常用DOM方法详解
2017/02/04 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Numpy 多维数据数组的实现
2020/06/18 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python如何执行系统命令
2020/09/23 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
酒店应聘自荐信
2013/11/09 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
大学班长的职责
2014/01/27 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby