React笔记（React-router）

参考文章：

• 《React Router 中文文档（一）》
• 《React-router4简约教程》

React-router 和 React-router-dom

• React-router

React-router 提供了一些 router 的核心api，包括 Router，Route，Switch 等，但是它没有提供 dom 操作进行跳转的 api。

• React-router-dom

React-router-dom 类似于 Vue-Router，Vue-Router 提供了 <router-link> 和 <router-view> 组件，而 React-router-dom 提供了 <Link>，<BrowserRouter>，<HashRouter>，<Route> 等api，我们可以通过 dom 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用 React-router-dom。

1<BrowserRouter>、<HashRouter> 和 <Route>

<Route> 组件的作用与 <router-view> 组件类似，即它用于显示路径匹配正确时应该显示的视图内容，但与 Vue 不同的是，<Route> 组件以及后续的 <Link> 和 <NavLink> 组件都必须被 <BrowserRouter> 组件或 <HashRouter> 组件包裹，同时 <BrowserRouter> 组件或 <HashRouter> 组件底下只能包裹一个子元素，即如果包含多个 <Route> 组件或 <Link> 和 <NavLink> 组件时，还需要将它们使用 <div> 包裹起来。

1.1 <BrowserRouter> 和 <HashRouter>

<BrowserRouter> 和 <HashRouter> 的不同在于 URL 的格式，<HashRouter> 组件就类似 Vue 一样，它通过 hash 值来对路由进行控制，此时路由就会默认有这个 #，而 <BrowserRouter> 就像正常地页面跳转的 URL 一样。

1.2 <Route> 组件

<Route> 组件是控制路径对应显示的组件，以下举列个人觉得比较重要的属性。

1.2.1 渲染方式

<Route> 组件渲染内容有三个方式：

• <Route component>
• <Route render>
• <Route children>

1.2.1.1 component 属性

使用声明 component 属性来渲染 <Route> 组件，形如：

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

<Route path="/user/:username" component={User} />

此时 <Router> 将根据指定的组件，使用 React.createElement 创建一个新的 React 元素，此时 URL 传入的参数可以在该指定的组件通过 this.props.match.params.userName 的形式获取。
那么每次渲染都会创建一个新组件，这将导致现有组件的卸载和新组件的安装，而不是仅仅更新现有组件。

1.2.1.2 render 属性

使用声明 render 属性来渲染 <Route> 组件，形如：

// 方便的内联渲染
<Route path="/home" render={() => <div>Home</div>} />

使用 render 可以方便地进行内联渲染和包装，而无需进行不必要的组件重装。

1.2.3 path 属性

path 属性代表的就是需要匹配得到的 URL 地址，没有定义 path 的 总是会被匹配。

1.2.4 exact 属性

exact 属性是一个布尔值，它表示只有在 path 属性完全匹配 location.pathname 时才匹配显示。
如：

<Route path="/route" render={() => <div>RouteFather</div>} />
<Route path="/route/routeson" render={() => <div>RouteSon</div>} />

此时，如果不声明 exact 属性，在匹配第二个路由成功的时候，第一个 <Route> 组件将会渲染出来。

2 <Link> 和 <NavLink>

<Link> 和 <NavLink> 作用如同 <router-link> 组件，即 <Link> 和 <NavLink> 两者都是可以控制路由跳转的，不同点是 <NavLink> 的 api 更多，更加满足你的需求。<Link> 和 <NavLink> 同样需要包裹在 <BrowserRouter> 以及 <HashRouter> 组件之中。

2.1 <Link> 组件

2.1.1 to 属性

<Link> 的主要参数是 to，to 属性可以接受一个 String 类型或者一个 Object 类型。
当接受的是 String 类型的时候，它的形式如：

<Link to="/courses?sort=name">

接受的是 Object 类型的时候，该 Object 的属性字段为：

• pathname：要连接到的路径
• search：查询参数
• hash：URL 中的 hash
• state：存储到 location 中的额外状态数据

2.1.1 replace 属性

replace 属性是一个布尔值，当设置为 true 时，点击链接后将替换历史堆栈中的当前条目，而不是添加新条目，默认为 false。

2.2 <NavLink> 组件

<NavLink> 组件其实就是一个扩展版的 <Link> 组件，它可以为当前选中的路由设置类名、样式以及回调函数等，即除了<Link> 组件的 to 属性与 replace 属性以外，它还提供了以下属性 API。

2.2.1 exact 属性

exact 属性用于严格匹配，声明了该属性的匹配路径不会再向下进行配对，它只有在位置完全匹配时才应用激活类、样式。

import React, { Component } from 'react';
import { NavLink, HashRouter, Route } from 'react-router-dom';
import Route1 from "../route1";
import Route2 from "../route2";


class ForRouter extends Component {
	render() {
		return (
			<div>
				<HashRouter>
					<div>
						<Route path="/route/route1" component={Route1}></Route>
						<Route path="/route" component={Route2}></Route>
						<NavLink to="/route/route1" activeClassName="active">go route1</NavLink>
						<NavLink to="/route" activeClassName="active" exact>go route</NavLink>
					</div>
				</HashRouter>
			</div>
			);
	}
}

export default ForRouter;

2.2.2 activeClassName 属性

当元素处于激活状态时应用的类，默认为 active。

2.2.3 activeStyle 属性

当元素处于激活状态时应用的样式，如：

const activeStyle = {
  fontWeight: 'bold',
  color: 'red'
};

<NavLink to="/faq" activeStyle={activeStyle}>FAQs</NavLink>