Router

react-router 是官方提供的路由库,差不多是唯一可选的路由库,通过对 url 的管理来触发相应的组件

Install

npm install react-router --save

Basis

app.js

import { Component } from 'react';
import { render } from 'react-dom';
import { App } from './router';
render(
  	<App/>,
  	document.querySelector('#app')
);

router.js

import { Component } from 'react';
//引入 react-router 模块
import { Router, Route, hashHistory } from 'react-router';
//引入组件
import { Home , About } from './page';

class App extends Component{
	// history 是设置 Router 组件的值,hashHistory 是处理路由的函数
	// Route 是定义一组路由,当路由匹配后展示设置的 component 组件
	render(){
		return (<Router history={ hashHistory }>
			<Route path="/" component={ Home }/>
			<Route path="/about" component={ About }/>
		</Router>);
	}
}
export { App };

page.js

import { Component } from 'react';
//引入 react-router 模块,获取 link 组件
import { Link } from 'react-router';

class Home extends Component{
	// 使用 link 代替 a 标签
	render(){
		return (
			<div>
				Home , 
				<Link to="/about">see about</Link>
			</div>
		);
	}
}

class About extends Component{
	// 使用 link 代替 a 标签
	render(){
		return (
			<h1>my svon</h1>
		);
	}
}
export { Home , About };

hash

设置 Router 组件的 history 属性为 hashHistory 时,react-router 会监听地址栏中的 hash 值变化,根据 hash 的变化来决定显示那一个组件
//使用路由组件
<Router history={hashHistory}> //设置路由触发的方法
  <Route path="/" component={App}/> //设置地址的变化,显示对应的组件
</Router>

路由嵌套

<Router history={hashHistory}>
  <Route path="/" component={ Layout }>
    <Route path="/index" component={ Index }/>
  </Route>
</Router>
class Layout extends Component{
	render(){
		//判断子元素是否存在,存在即克隆该组件
		//不存在创建一个默认的标签或则展示默认的组件
		const view = this.props.children ? React.cloneElement(this.props.children) : (
			<h1> Welcome </h1>
		);
		return (
			<div>{ view }</div>
		);
	}
}

IndexRoute

<Router history={hashHistory}>
  <Route path="/" component={ Layout }>
    <IndexRoute component={ Home }/>
    <Route path="/index" component={ Index }/>
  </Route>
</Router>
当你访问的路由为 / 时,先执行 Layout 组件,在 Layout 组件中 this.props.children 为 Home 组件对象

import { Link } from 'react-router';

	使用 react-router 组件定义的路由后,希望页面跳转时触发路由,需要使用 Link 来代替 a 标签 

class Page extends Component {
	render(){
		return (
			<div> 
				<Link to="/website/path">see website</Link>
			</div>
		);
	}
}
Link 可以看作是 a 标签
to   可以看作是 href 属性

因为 / 会匹配任何子路由。而 IndexLink 组件会使用路径的精确匹配。
import { Link, IndexLink } from 'react-router';

	使用 react-router 组件定义的路由后,希望页面跳转时触发路由,需要使用 Link 来代替 a 标签 

const home = <IndexLink to="/">Home</IndexLink>;
还可以对 Link 设置 onlyActiveOnIndex 属性,可以达到同样的效果。

import { Link } from 'react-router';

	如果希望在使用跳转时带入一些 get 参数,就需要使用传统的 ?name=name&age=age
	但是拼字符串时很麻烦的一件事,react-router 已经给我们设计好了

class Page extends Component {
	render(){
		let toPath = {
			pathname:"/website/path",
			query:{
				name: "name",
				age : "age",
				sex : "sex"
			}
		}
		return (
			<div> 
				<Link to={ toPath }>see website</Link>
			</div>
		);
	}
}
Link to 可以接受一个对象
上面路由触发后地址栏显示为 /website/path?name=name&age=age&sex=sex

props.location

location 是 react-router 加载组件后传递过去的一个对象,用来描述当前路由的相关信息

location 包含以下数据信息

{
	action : "",
	hash : "",
	key : "",
	pathname : "",
	query : {

	},
	search : "",
	state : ""
}

动态路由

动态路由是对 Route 中的 path 做扩展,可以让我们设置一些带有相同规则的路由
规则 path="/:name"
匹配 /a
	  /b
	  /c
规则 path="/html/(/:name)"
匹配 /html
	  /html/a
	  /html/b
	  /html/c
规则 path="/html/*"
匹配 /html/a
	  /html/b
	  /html/c
	  /html/d
规则 path="/html/*.html"
匹配 /html/a.html
	  /html/b.html
	  /html/c.html
	  /html/d.html

browserHistory

当 Router history={browserHistory} 设置为 browserHistory,react 将不在使用 hash 来监听地址栏的变化,而是使用 html5 的 History API。
import { Component } from 'react';
//引入 react-router 模块
import { Router, Route, browserHistory } from 'react-router';
//引入组件
import { Home , About } from './page';

class App extends Component{
	render(){
		return (<Router history={ browserHistory }>
			<Route path="/" component={ Home }/>
			<Route path="/about" component={ About }/>
		</Router>);
	}
}

注意

当用户刷新后需要服务器支持,因为用户刷新后请求的地址是一个真实的 url 路径,需要服务器做技术支持才能保证用户不会看到 404