模块化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 三种编解码方式
Feb 01 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
windows实现npm和cnpm安装步骤
Oct 24 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+ACCESS 文章管理程序代码
2010/06/21 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python发送email的3种方法
2015/04/28 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python模块常用四种安装方式
2020/10/20 Python
selenium自动化测试入门实战
2020/12/21 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
关于爱情的广播稿
2014/01/16 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript