react router 4

CoderBear 发布于2019-08-22 17:10 / 1391人阅读

摘要：也走了的路，咳，一切都成组件。中，你可以将各种组件及标签放进组件中，它用来保持与的同步。组件下只允许存在一个子元素。参数偶尔会被使用，它更常用在无法匹配时呈现的空状态。默认为组件示例为关于为拥有优质的文档，你可以查看并从中了解更多的信息

React Router V4 也走了react的路，咳，一切都成组件。例如Route、Link、Switch等都是组件。
react-router和react-router-dom是react router拆分出来的，平时使用只需要引入react-router-dom，当然，如果搭配redux，你还需要使用react-router-redux。

Router

React Router 4 中，你可以将各种组件及标签放进组件中，它用来保持与 location 的同步。tips: 组件下只允许存在一个子元素。可以像以下方式使用：

import { BrowserRouter } from "react-router-dom"
ReactDOM.render((
  
      //在app中进行拆分，放网站的导航链接，以及其他的
  
), document.getElementById("main"))

：使用 HTML5 提供的 history API（pushState,
replaceState以及popstate事件）来保持 UI 和 URL
的同步，在服务区来管理动态请求时，需要使用组件；

：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL
的同步，一般静态页面使用；

：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；

：为使用React Native提供路由支持；

：从不会改变地址；

组件有如下属性：

path: 路由匹配路径。（没有path属性的Route 总是会匹配）；

exact：为true时，则要求路径与location.pathname必须完全匹配,如 path="/test",你就只能匹配到"/test"；

strict：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname，如path="/test/"只匹配 "/test/*"；

提供了三种渲染内容的方法：

：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；

：当匹配成功后调用该函数。该过程与传入component参数类似,这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；

：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

tips:的优先级要比高,通常component参数与render参数被更经常地使用。children参数偶尔会被使用，它更常用在path无法匹配时呈现的"空"状态。

会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染

import { Switch, Route } from "react-router"

当你点击时，URL会更新，组件会被重新渲染，但是页面不会重新加载。
Link组件属性：

to（string/object）：要跳转的路径或地址；

replace（bool）：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false
时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

// Link组件示例

// to为string
关于

// to为obj


// replace

React Router拥有优质的文档，你可以查看并从中了解更多的信息

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

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

[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
从项目中由浅入深的学习react (2)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章从项目中由浅入深的学习vue,微信小程序...

leap_frog 2019-08-23 16:42 评论0 收藏0
利用react-router4的react-router-config做路由鉴权

摘要：一是一个帮助我们配置静态路由的小助手。以上修改了部分源码并完成了我们想要的效果。一、react-router-config 是一个帮助我们配置静态路由的小助手。其源码就是一个高阶函数利用一个map函数生成静态路由 import React from react; import Switch from react-router/Switch; import Route from re...

Amos 2019-08-22 18:03 评论0 收藏0
手挽手带你学React：三档 React-router4.x的使用

摘要：我们在内部来渲染不同的组件我们这里采用哈希路由的方式，鉴于的渲染机制，我们需要把值绑定进入内部。手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目什么是React-router React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 评论0 收藏0
react-router @4用法整理

摘要：官方文档源码这篇文章主要介绍了的基本用法包括动态路由编程式导航等安装用法动态路由的基本用法编程式导航总结安装用法示例代码关于路由重定向使用的格式注意位置需要在定义路由的后面比如重定向就需要写在后面关于路由匹配默认写在路由末尾前 router@4 react-router@4官方文档 github源码这篇文章主要介绍了react-router@4的基本用法,包括动态路由,编程式...

piglei 2019-08-21 17:52 评论0 收藏0