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