模块化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—window对象使用示例
Dec 09 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
简单实现JS计算器功能
Dec 21 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
详解vuex状态管理模式
Nov 01 Javascript
Vue使用axios出现options请求方法
May 30 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版QQ互联OAuth示例代码分享
2015/07/05 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
深入了解Python 变量作用域
2020/07/24 Python
Python 实现一个计时器
2020/07/28 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
开工典礼致辞
2015/07/29 职场文书