react-路由

react路由 4.x
	资料：
		API:https://reacttraining.com/react-router/web/guides/quick-start
		CN：http://blog.csdn.net/sinat_17775997/article/details/77411324
	区别：
		V4
			嵌套式路由（路由配置在组件内部），动态路由，包容性（多路由渲染）
			舍去了路由钩子
		V3
			分离式（统一位置配置），静态路由，排他性（只有一个路由被渲染）
	
	理念：
		遵循Just Component的 API 设计理念 万物皆组件，路由规则位于布局和 UI 本身之间

	安装引入 react-router-dom

	React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件

	BrowserRouter 使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步
	HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和URL 的同步

	依赖安装引入 react-router-dom

	提供哪些组件:
		
		BrowserRouter  约定模式 为 history
		HashRouter   约定模式 为 hash
		NavLink     声明式跳转 还可以约定 路由激活状态 | 导航高亮    ~~ push 
		Link 		声明式跳转    ~~ push
		Redirect    重定向    ~~ replace
		Route       匹配     ~~ router-view + {path:xx,component}
		Switch      排他性匹配
		Prompt      后置守卫

	结构：
		BrowserRouter|HashRouter 路由对象
			根组件(App)|其他组件
				NavLink|Link  导航
				Route    匹配+展示
				Redirect 跳转
				
				默认路由 <Route exact path={match.path} render={fuc}
	Route 属性
		path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
		exact（bool）：
			为true时，要求全路径匹配(/home)。V4 的路由默认为“包含”的(/和/home都匹配)，这意味着多个 <Route> 可以同时进行匹配和渲染

		component：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染
		render：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便
	Link：
		to：string/object：要跳转的路径或地址；
	NavLink：是<Link> 的一个特定版本
		activeClassName（string）：设置选中样式，默认值为 active；
		activeStyle（object）：当元素被选中时, 为此元素添加样式；
	Switch：该组件用来渲染匹配地址的第一个<Route>或者<Redirect>，仅渲染一个路由，排他性路由,默认全匹配(场景：侧边栏和面包屑，引导选项卡等
	Redirect:
		<Redirect from="/" to='/home'/> 总是会被重定向
	404:	<Route component={Error}/> 总是会匹配

	参数数据：{history,location,match}==props
		传递：
			to={match.url+'/001'}
			to={`${match.url}/002?a=1&b=2`}
			to={{pathname:match.url+'/003',search:'?a=11&b=12',hash:'#a1'}}
			<Route path={match.path+'/:aid'} component={Detail}
				注意：
					url - (浏览器 URL 中的实际路径) URL 匹配的部分。 用于构建嵌套的 <Link>
					path - (路由编写的路径) 用于匹配路径模式。用于构建嵌套的 <Route>
		接收：
			接参数:{match.params.aid}
			接数据:{location.search}
			接地址:{location.pathname}
		注意：
			无法从v4 中获取 URL 的查询字符串了。因为没有关于如何处理复杂查询字符串的标准。所以，作者让开发者去选择如何处理查询字符串。推荐query-string库
	跳转：
		history.push('/user?a=1&b=2')
		history.push({pathname:'/user',search:'?a=11&b=22'})
		history.replace({pathname:'/user',search:'?a=111&b=222'})
		history.go(-1)


	授权路由：自定义路由
		
		Prompt:后置守卫,离开后守卫
			import { Prompt } from 'react-router-dom'
			<Prompt
	          when={this.state.isBlocking}
	          message={location=>{return `未保存，是否去向${location.pathname}`}}
	        />
	        message: 后面可以跟简单的提示语，也可以跟函数，函数是有默认参数的。
	        when: when的属性值为true时防止跳转；

在对应的index.js

import React from 'react';
import ReactDom from 'react-dom'  
import App from "./components/App"
import {BrowserRouter} from 'react-router-dom'
// 渲染dom
ReactDom.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    ,
    document.querySelector('#root')
);

在对应的app.js内

import React,{Component} from 'react'
import {Link,Route,NavLink,Redirect,Switch} from 'react-router-dom'
import Home from './home';
import User from './User';
import Product from './Product';
import Detail from './Detail';
import Login from './Login';
import Errorpage from './Errorpage';
import './assets/App.css'

class App extends Component{
    render() {
        return(
        <div>
            <h3>react-router</h3>
            <NavLink to="/home"activeClassName="app-nav--active"> 首页</NavLink>
            <NavLink to="/user"activeStyle={{background:"pink"}}> user</NavLink>
            <NavLink to="/product"activeStyle={{background:"pink"}}> 商品</NavLink>
            <NavLink to="/login"activeStyle={{background:"pink"}}> login</NavLink>
            <Switch>
                <Route path='/home' component={Home} ></Route>
                <Route path='/user' component={User} ></Route>
                <Route path='/product' component={Product}></Route>
                <Route path='/login' component={Login}></Route>
                <Redirect exact from="/" to="/home" />
                <Route component={Errorpage} />
            </Switch>
        </div>)

        
    }
}

export default App

在project.js

import React,{Component} from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail';
import querystring from 'query-string'


class Product extends Component{
    render(h) {
        console.log(this.props)
        return (<div>
            <h3>商品</h3>
            <Link to="/product/1" >商品001</Link>
            <Link to={this.props.match.url+'/2'}>商品002</Link>
            <Link to="/product/3?aa=1&bb=2">商品003</Link>
            <Link to={{pathname:this.props.match.url+'/4',search:'aa=11&bb=22'}}>商品004</Link>
            <Link to={{pathname:this.props.match.url+'/5',search:querystring.stringify({aa:111,bb:33})}}>商品005</Link>

            <Route path={this.props.match.path+'/:aid'} component={Detail}></Route>
        </div>)
    }
}
export default Product

在对应的detail

import React,{Component} from 'react'

class Detail extends Component{
    render(h) {
        return (
            <div className="Detail">
            <h3>详情</h3>
            <a href="javascript:;" onClick={()=>this.props.history.go(-1)}>返回←</a>
        </div>)
    }
}
export default Detail

在user内，有后置守卫

import React,{Component} from 'react'
import {Prompt} from 'react-router-dom'

class User extends Component{
    state={
        bl:true
    };
    render() {
        return (<div>
            <Prompt
            when={this.state.bl}
            message={location=>{return `未保存，是否去向${location.pathname}`}}>
                <h3>User的内容</h3>
            </Prompt>
        </div>)
    }
}
export default User