资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/react-router-dom v^4学习历程（一）

react-router-dom v^4学习历程（一）

KevinYan / 2681人阅读

摘要：用于精准匹配路径，不用也会匹配到匹配的路径的子路径，这样两个路由组件都会显示。路径中传递参数到路由到的组件，就是在路径前面加上这样这个路由地址就会变成一个参数被组件接受到。例如可以获取到当前的基础路径。

react-router-dom的版本已经更新到了4.1.1，那么我们就一起来学习学习react v4这个新版路由的基本使用吧！

在学习路由之前我们先需要复习几个基础知识，关于react组件的构建，和分离组件到另外的文件

生成react组件的方式

我们可以采用一个函数来快速生成一个 react组件

观察如下代码

import React from "react"
const Mycomponent=()=>(
  

    
这是我的第一个函数组件

  

  
)
ReactDOM.render(,document.getElementById("example"))

渲染组件到根节点上，可以看出没有任何问题。
我们也可以把这个组件分离到另外一个文件中，用es6的 语法import default export导入导出，然后在index.jsx中引用它

//Mycomponent.jsx
import React from "react"
const Mycomponent=()=>(
  

    
这是我的第一个函数组件

  

  
)
export default Mycomponent
//index.jsx
import Mycomponent from "./Mycomponent"

这样我们就可以做到函数式构建的react组件在react项目中模块化使用

第二种就是我们常用的class方式声明组件

   import React from "react"
    export default class Topic extends React.Component{
    
    render(){
      return (
        

        
{this.props.match.params.topicId}

      

    
        )
      }
    }
向构造react组件模板的函数中传入路由参数

如果一个react组件作为Route的component属性值，如下

函数式声明Home时，它的模板定义函数就会默认接受一个对象作为参数，里面包含了路由的各种信息

这样我们就可以利用模板定义函数参数中的信息获取到路由中的参数。
`

  const Topic=({match})=>//es6语法将参数对象中的match属性
 (                         //赋值给参数match
 


{match.params.topicId}

 

)

如果是用类的方式声明的组件那么获取路由参数信息的办法是在jsx渲染模板中
this.props.match.params

预备知识完毕，下面我们就看看怎么做一个react路由

路由基本用法

路由要解决的基本需求是从一个链接点击到另外一个链接，在页面中无刷新跳转到页面的另外一部分内容。类似于tabs面板。
例如有如下界面

三个组件如下：

const App=()=>(
  
主页

)
const Hot=()=>(
热门
)
const Content=()=>(
  
文章

)
const Zhuanlan=()=>(

  
专栏


)

那么在需要使用路由的页面组件里面，渲染如下模板

 import {Link,Route,BrowserRouter as Router} from "react-router-dom" 
  (
  

    
    
      
  • 主页
    • 
      
  • 热门
    • 
      
  • 专栏
    • 
    

    

    
    
    
  

)

注意使用Router作为最外层标签，里面只能有一个一级子节点，用Link来导航 ，to指定路径，Route指定要导航到的组件，这样一个路由的基本使用就成型了。exact用于精准匹配路径，不用exact也会匹配到匹配的路径的子路径，这样两个路由组件都会显示。我们需要的是每次切换只会显示一个Route中指定的组件

路由的嵌套和路径中参数传递

在一个子组件Hot中，再嵌套一个子路由我们应该怎么做？
很简单就是把路由Route再写入Hot的模板中实现路由嵌套。

路径中传递参数到路由到的组件，就是在路径前面加上: ,这样这个路由地址就会变成一个参数被组件接受到。例如${match.url}/:id
${match.url}可以获取到当前的基础路径。然后在路由用到的组件中可以用

match.params(函数式声明的组件中,match需要在函数参数中引入)或this.props.match.params（React class类render函数中）
示例如下

  ///父组件中
    const Hot=({match})=>(

    
    
热门

    文章
    问答
    新闻
    

    
    
    
)
    //子组件中
    const Content=({match})=>(
  

  
热门子目录


{match.params.type}

  

)

总结
1.组件生成的方式有两种，render在类中显式渲染，函数生成。
2.路由的基本用法Router>Route path component指定路径和组件，Link添加导航按钮链接，to指定路径地址
3.路由的嵌套，直接在子组件模板中添加Route，Link，match.url引入基础路径
4.路由路径参数传递到模板，用baseUrl/:id类似格式，组件中用match.params.id接收。

服务器托管 私有云 学习历程 学习笔记一 深度学习一 深度学习一篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82915.html

相关文章

  • todo-list 项目问题总结（使用 react 进行开发）

    摘要：项目问题总结这个项目，很简单，前端使用，后端使用进行开发。方便移动端开发。当动画结束后，有一个钩子函数可以使用其他一些功能组件，都是自己尝试去编写的，像日历组件组件组件等。版本的，是没有任何的钩子函数，我就感觉懵逼了。。。 todo-list 项目问题总结 这个 todo-list 项目，很简单，前端使用 react，后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...

    shengguo 评论0 收藏0

  • vue(1)-学习历程之vue解决jquery的什么痛点

    摘要：解决的痛点首先我们需要明白和理解和的设计初衷和理念。所有框架要解决的问题应对需求变化，防止大面积重写。参考文献渐进式框架理解核心功能原理解析百度网盘视频学习以及源码资源提取密码 vue解决jquery的痛点 首先我们需要明白和理解jquery和vue的设计初衷和理念。 jquery官网给出的开篇介绍是，jquery是一个快，小，功能丰富的js库，它让html文档遍历和操作，事件处理...

    zhaofeihao 评论0 收藏0

  • Python的发展历程

    摘要：可以脱离语言环境独立运行就像一本英文书，我找一个翻译，给他点时间，把英文书翻译成中文的，这就是编译型语言解释型语言有良好的平台兼容性，在任何环境中都可以运行，前提是安装了解释器虚拟机。就像还是一本英文书，我看一句让他给我解释一句。 写在前面 随着大数据、人工智能这类词汇扑向我们，python这个早在1989就已经出现的语言终于高调回归,为了更好的学习python 我们先来了解下它的前世...

    lovXin 评论0 收藏0

  • 深度学习与神经网络全局概览：核心技术的发展历程

    摘要：在学习过程中，神经网络的突触权重会以一种有序的方式进行修改，从而实现所需的目标。中间单元的数量被称为网络所用的片的数量。 随着神经网络的进化，许多过去曾被认为不可想象的任务现在也能够被完成了。图像识别、语音识别、寻找数据集中的深度关系等任务现在已经变得远远更加简单了。在此向这一领域的杰出的研究者致以真诚的谢意，正是他们的发现和成果帮助我们利用上了神经网络的真正力量。如果你真正对追求机器学习这...

    Jenny_Tong 评论0 收藏0

发表评论

登陆后可评论

0条评论

KevinYan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<