react 路由

react 路由

需要下包 react-router-dom
所有的根组件只能调用一次，因为一个浏览器只有一个url地址，且所有的组件只能在根组件内使用
HashRouter组件(hash模式)
使用window.location.hash 和 hashchange 事件构建路由
BrowserRouter组件(history模式)
使用pushState 和 popState 事件构建路由
使用history配置路由的具体实

import React,{Component} from "react"
import {BrowserRouter as Router,Route}  from "react-router-dom"
import Home from "../view/home"
import List from "../view/list"
render(){
    return <Router>
            <Route path="/" component={Home} exact />
            <Route path="/list" component={List} exact />
        </Router>
}
path:指定路径名
component:路径匹配时渲染UI，内部实现React.createElement()方法
render:路径匹配时渲染UI，后面跟函数，不会重新创建元素，只调用render()方法
exact:指定严格的匹配规则

通过Router组件调的叫视图组件，Router组件在调视图组件时，会传递参数过去，history指浏览器对象,location指当前页面url信息,match获取当前一条路由的信息，匹配的信息
Switch 只渲染第一个被匹配到的视图，比较大的路由放在后边
Link 解析为a标签，to属性不会重载整个页面，不会渲染整个页面
NavLink 在link的基础上添加了activeClassName 类名
Redirect 重定向 from 从哪来,to 到哪去 ，写在Switch 里面的最后，否则会内存溢出
路由跳转,渲染路由(俩种方法)

<Route path="/home" component={Home} />
<Route path="/home" render={(props) => {
	//props
	return <Search {...props} />
}}

跳转路由(俩种方式)

<Link to="" ></Link>
history.push("path") / history.push({pathname:"path"}) / history.replace("path")
//pathname: path + search 

关于地址栏参数

http://localhost:3000/cinema/movie/246264?$from=canary#
path: /cinema/movie/246264
search: ?$from=canary#
query: $from=canary#

跳转子路由
跳转后必须配置 Route 进行渲染
俩个配置路径的必须配全路径，父路径/子路径

————————————————
1