react 路由

• 需要下包 react-router-dom
• 分俩种路由模式 hash 和 history
• 所有的根组件只能调用一次，因为一个浏览器只有一个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#

• 页面想用 history 对象但不是通过Router组件渲染的，需要引入 withRouter() 方法 ，高阶组件，接受一个组件类，返回一个新的组件，在新组件里获取到history,localtion,match
• mock — axios , 需要下mockjs 和 axios 包
  • 数据图片路径不一致，想要修改路径中的部分内容，使用 <img src={img.replace(“w.h”,“128.180”)} /> 替换路径中的部分内容
  • 解构深层数据

axios.get("/api/hotShow").then(({data:{data:{movieList}}}) => {
    console.log(movieList)
})

• 动态路由

<Route path="/detail/:id" render={(props) => {}}
//传id
history.push(`/detail/${item.id}`)
//取id
props.match.params.id

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