React-router使用

介绍

react-router被分为以下几部分：

react-router是浏览器和原生应用中的通用部分。
react-router-dom是用于浏览器的。
react-router-native是用于原生应用的。

react-router是核心部分。react-router-dom提供了浏览器使用需要的定制组件。react-router-native则专门提供了在原生移动应用中需要用到的部分。

安装

开发web引用只需要安装react-router-dom。

npm install react-router-dom --save

三个props

history

History是React Router的两大重要依赖之一，在不同的JavaScript环境中，history以多种形式实现了对于session历史的管理。

history对象通常会具有以下属性和方法：

length - number类型，表示history堆栈的数量。
action - string类型，表示当前的动作。比如pop、replace或push。
location - object类型，表示当前的位置。
push(path, [state]) - function类型，在history堆栈顶加入一个新的条目。
replace(path, [state]) - function类型，替换在history堆栈中的当前条目。
go(n) - function类型，将history堆栈中的指针向前移动n。
goBack() - function类型，等同于go(-1)。
goForward() - function类型，等同于go(1)。
block(promt) - function类型，阻止跳转。

match

match对象包含了<Route path>如何与URL匹配的信息。match对象包含以下属性：

params - object类型，表示路径参数，通过解析URL中动态的部分获得的键值对。
isExact - 为true时，整个URL都需要匹配。
path - string类型，用来做匹配的路径格式。
url - string类型，URL匹配的部分。

获取match对象：

在Route component中，以this.props.match方式。
在Route render中，以({ match }) => ()方式。
在Route children中，以({ match }) => ()方式。

location

location是指当前的位置，下一步的位置，或者之前所在的位置。location的属性：

pathname - string类型，URL路径。
search - string类型，URl中查询字符串。
hash - string类型，URL的hash分段。
state - string类型，表示location中的状态，只会出现在browser history和memory history的环境里。

获取location对象的方式：

在Route component中，以this.props.location的方式获取。
在Route render中，以({ location }) => ()的方式获取。
在Route children中，以({ location }) => ()的方式获取。
在withRouter中，以this.props.location的方式获取。

路由组件

Router

针对不同功能和平台，有集中不同的子类组件：

<BrowserRouter> 浏览器的路由组件
<HashRouter> URL格式为Hash路由组件
<MemoryRouter> 内存路由组件
<NativeRouter> Native的路由组件
<StaticRouter> 地址改变的静态路由组件

BrowserRouter组件

BrowserRouter主要用于浏览器中，也就是web应用中。当点击程序中的一个连接之后，BrowserRouter就会找出与这个URL匹配的Route，并将对应的组件渲染出来。BrowserRouter是用来管理组件的，应用程序的组件作为它的子组件而存在。

BrowserRouter组件提供的属性：

basename - string类型，路由器的默认根路径。
forceRefresh - bool类型，在导航的过程中整个页面是否刷新。
getUserConfirmation - function类型，当导航需要确认时执行的函数。默认是：window.confirm。
keylength - number类型，location.key的长度。默认是6。
children - node类型，渲染单一子组件。

HashRouter

HashRouter使用的URL的hash来保持UI和URL的同步。使用hash的方式记录导航历史不支持location.key和location.state。跟BrowserRouter类似，也有basename、getUserConfirmation、children属性，而且是一样的。

MemoryRouter

主要用在ReactNative这种非浏览器的环境中，因此直接将URL的history保存在了内容中。StaticRouter主要用于服务器端渲染。

Route组件

<Route>组件是react router的最重要的组件，当location与Route的path匹配时渲染Route中的Component。如果多个Route匹配，那么这些Route的Component都会被渲染。

Route组件的属性：

path - 字符串类型，它的值就是用来匹配url的。
component - 它的值是一个组件，在path匹配成功之后会渲染这个组件。
exact - 指明这个路由是不是排他匹配。
strict - 指明路径只匹配以斜线结尾的路径。

可以代替component属性的属性：

render - function类型，Route会渲染这个function的返回值，可以添加一些副作用。
children - 即使没有匹配路径的时候，也总是会渲染。我们可以根据match参数来决定匹配的时候渲染什么，不匹配的时候渲染什么。

所有路由中指定的组件将被传入以下三个props：location、match、history。

Link组件

使用<Link>可以在React应用的不同页面之间跳转，只会加载页面里和当前url可以匹配的部分。<Link>组件需要用到to属性，用来指明目标组件的地址，地址可以是一个字符串，也可以是一个location对象。

replace属性设置为true时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。设置为false时，点击链接后将在原有访问历史的基础上添加一个新纪录。

NavLink是一个特殊的Link，可以使用activeClassName来设置Link被选中时被附加的class，使用activeStyle来配置被选中时应用的样式。exact属性要求路径完全匹配才会附加class和style。

Redirect组件

当这个组件被渲染时，location会被重写为Redirect的to制定到新location。它的一个用途是登陆重定向，比如用户在点击登录按钮并通过验证之后，将页面跳转到个人主页。

Switch组件

渲染匹配地址（location）的第一个<Route>或者<Redirect>。相反的，每一个包含匹配地址的（location）的<Route>都会被渲染。