交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 模块化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的几种配置方式详解

    广而告之:
    热门推荐:
    关于中gridview 字符串截取的方法

    首先在前台设置样式复制代码 代码如下:<style  type="text/css">   .listover150  {  width:150px;  text-align:left;  overflow:hidden;  text-overflow:ellipsis;//超长设置省略号  white-space:nowrap;  }&n···

    NodeJS的模块写法入门(实例代码)

    我们知道每个模块对应一个js文件,这篇写一个最简单的模块hello.js, 然后在另一个js文件(main.js)中require自定义的模块。 hello.js 复制代码 代码如下: function hello(name) { console.log('hello, '+ name); } exports.hello = hello; main.js 复制代码 代码如下:···

    dedecms 上一篇和下一篇调用链接的正则写法

    <a href="{dede:prenext get=pre runphp=yes}$url = @me;preg_match('/href=[\'\"]?([^\'\"]+)/', $url, $match);@me = $match[1];{/dede:prenext}">上一篇</a> <a href="{dede:prenext get=next runphp=ye···

    解决MySQL5.1安装时出现Cannot create windows service for mysql.error:0

    安装MySQL5.1过程中,我把以前MySQL5.0的GUI工具和服务器全部删掉,安装目录全部删掉,数据文件目录名字改掉,注册表用完美卸载清理了。  然后重启安装MySQL5.1(我以前遇到过服务启动不了的情况,这样做就搞定了),可配置到最后一步时出现Cannot create windows service···

    PHP基础知识回顾

    header("Content-Type:text/html;charset=UTF-8"); $conn = mysql_connect('localhost','root','');//链接服务器(非永久性) if(!$conn){ echo '<hr/>'; die('error:'.mysql_error()); }else{ echo '<hr/>'; echo '链接服务器:'.$conn; } $db = mysql_selec···

    详解为Angular.js内置$http服务添加拦截器的方法

    前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性···

    PHP 利用Mail

    重点为one_mail函数。利用Mail_mimeDecode类从邮件中提取邮件头和邮件正文。 复制代码 代码如下: <?php header("content-type:text/html; charset=UTF-8"); /* * record kid words and insert into database * user by sending email to publication kid words * */ i···

    微信web端后退强制刷新功能的实现代码

    具体代码如下所示: <script> //生成uuid var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function uuid() { var r; var uuid = []; uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"; uuid[14] ···

    HTML5实现简单图片上传所遇到的问题及解决办法

     一、展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器···

    Node.js中使用计时器定时执行函数详解

    如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数。比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加“Hello there”: 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1···