VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 模块化react-router配置方法详解

    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 v4 路由配置方法小结
    • 关于react-router的几种配置方式详解

    广而告之:
    热门推荐:
    纯css为select添加样式(无脚本)实现

    改变select默认的样式,一般情路情况下通过ul,li来模拟来实现。 有很多Jquery插件就是通过这样的方式来改变select默认样式的。 根据程序哥哥那边的反映,此种方式在form提交后无法获取数据,后来经过实验,用了不同的JS/Jquery插件,都是同样的结果:无法获取数据。 后···

    MySQL5.7 group by新特性报错1055的解决办法

    项目中本来使用的是mysql5.6进行开发,切换到5.7之后,突然发现原来的一些sql运行都报错,错误编码1055,错误信息和sql_mode中的“only_full_group_by“有关,到网上看了原因,说是mysql5.7中only_full_group_by这个模式是默认开启的 解决办法大致有两种: 一:在sql查询语句中···

    2种简单的js倒计时方式

    一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times >···

    微信小程序 wepy框架与iview-weapp的用法详解

     最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错。引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的···

    php使用数组填充下拉列表框的方法

    本文实例讲述了php使用数组填充下拉列表框的方法。分享给大家供大家参考。具体实现方法如下: <?php $data = array( (object)array("titulo"=>"Ford", "valor"=>"opcion1"), (object)array("titulo"=>"Peugeot", "valor"=>"opcion2"), (object)arra···

    PHP4和PHP5性能测试和对比 测试代码与环境

    作者:heiyeluren博客:http://blog.csdn.net/heiyeshuwu时间:2007年8月6日PHP 4到今年年底PHP Group将不再对其进行支持了,所以为了让大家更有信心的转移到PHP 5平台上,我特别做了这个测试,看看我们PHP 4.x 是否真的性能比我们的PHP 5.x要好捏,测试结果很明显,那就···

    如何用workbench导出mysql数据库关系图

    1. 打开mysql workbench,选择首页中间"Data Modeling"下方的第二栏"Create EER Model From Existing Database";2. 在"Stored Connection"里选择"Manage Stored Connections...";3. 在Manage DB Connections里选择“New”新建连接,并在左侧输入框里填好想连接的数据库信息;4···

    使用整洁的HTML标记构建页面

    网络是个不断发展变化的有机体,如何建设可以长久适应互联网发展的页面是很重要的,它可以是你的网站在互联网发展的激流中迅速跟进。 使用整洁的HTML标记,构建符合标准的页面可以帮助你做到这些,更重要的,它可以是你在未来的运营中节省大量的时间和金钱。 网页技术是跟随互···

    PHP中预定义的6种接口介绍

    PHP预定义了6个接口介绍如下: 1.Traversable遍历接口 呵呵!其实它不是一个在PHP中可以使用的接口,内部类才可使用,它有一个用途就是检测一个类是否可以遍历。 if($class instanceof Traversable) { //foreach } 2.Iterator迭代器接口 接口摘要: Iterator extends Trave···

    ThinkPHP中类的构造函数

    前言 相信熟悉THINKPHP的phper基本上都很熟悉_initialize()这个方法,我们似乎也很少去使用_construct() ,除非自己写插件,否则还真是很少用到。 今天查看代码突然看到_construct()这个php自带的构造方法,我的第一感觉是比较陌生,虽然之前学习java时经常遇到,但是很久···