1.前端路由
前端路由的基石是history.js,浏览器的历史记录，是一个栈的结构（先进后出）。他主要分为两种，一种是hash模式，地址栏会带上#，相当于锚点跳转，不会引起页面的刷新，但是可以进行页面跳转，一种是新的形式history模式，它在使用时，需要事先下载（### react-router的原理是只更新变化的部分从而减少DOM性能消耗）。要明确展示区和导航区
1）路由链接（导航区）：引起路由的变化
原生的html直接使用a标签就可以进行路由的跳转，在react中我们要在上方用import引入一个Link组件，这个组件由react-router-dom内部定义，用于链接跳转。Link的外边还需要包裹着Router，Router分为BrowerRouter和HashRouter两种。需要明确具体是哪一种Router，此外link里面的to='/XXX' 单引号里面是没有.的。
2）注册路由（展示区）：外边也需要包裹着是哪一种Router。
<Route path='/' component={XXX}></Route>
当页面跳转到XXX页面时，展示XXX组件
但是由于整一个应用应该只有一个路由器包裹，所以可以在总的app里面包裹着Router
3）路由组件和一般组件的不同
写法不同：
一般组件：<Demo/>
路由组件：<Route path="/Demo" component={Demo} />
存放文件夹位置不同：
一般组件：components
路由组件：pages
接收到的props不同（根本区别）：
一般组件：组件标签写什么值就传什么值
路由组件：会接收到路由的信息（history、location、match等），也可以传自定义的属性值
4)Navlink会在匹配上当前的url的时候给已经渲染的元素添加参数
另外props 是接受属性的，但是标签体内容也属于特殊的属性
5)swtich
Switch匹配到第一个路由就不会继续匹配了，实现单一匹配
6)解决css样式丢失
href='./css.css' 中 引入样式时不写 ./ ，带.是当前路径下的，是相对路径，不带的话就是直接从localhost中
'./css.css' 中 引入样式时不写 ./ 写 %PUBLIC_URL%（绝对路径）
带点的话可以使用改变路由方式的方法，使用HashRouter，但是此方法不常用
7）精准匹配与模糊匹配
精准匹配：extra={true}，开启精准匹配
如果路由谁都没有匹配到，就用Redirect，to到具体要到的位置
8)Redirect
跳转式可以用浏览器的回退按钮返回上一级的，而重定向是不可以的。
标签重定向：就是利用<Redirect>标签来进行重定向，业务逻辑不复杂时建议使用这种。
编程式重定向：这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功后跳转到首页
this.props.history.push("/web/home");
// 返回到上一级页面的几种方法
//第一种 this.props.history.push("/web/home");
//第一种 this.props.history.replace("/web/home");
//第三种方法,推荐使用 window.history.back(-1);推荐此方法
9)嵌套路由
大概过程就是注册,挂载展示,再注册,继续挂载展示,
1.注册的子路由需要写上父路由的Path值,
2.路由的匹配是按照注册的顺序来的
10)向路由传递参数--Params
刷新页面参数不会消失,参数在地址栏显示,需要在路由页面配置
1.传递参数的几种方法
HTML 带谁就传谁,这里是传递参数
<Link to={ `/路径/${obj.id}/${obj.title} ` }>XXXX</Link>
JS 带谁就传谁,这里是传递参数
this.props.history.push( `/路径/${obj.id}/${obj.title} ` )
2.路由表 注册路由(声明接受)
<Route path='/路径/:id/:title' component={candy}>
3.接受参数
通过 this.props.match.params.id
11)向路由传递参数state
页面刷新参数不丢失,state传递的参数是加密的,不支持hashrouter
1.传递参数
<Link to={{pathname: '/路径', state: {key: value}}} />
2.声明接受
<Route path="/路径" />
12)向路由中传递参数search
页面刷新后参数丢失
1.传递参数
<Link to={`/路径/?key=${变量}`} />
2.声明接受
<Route path="/路径" />
打印看一下结果
console.log(this.props.location.search) //?key=value&key=value
需要引入querystring会自动解析如上的格式,但开头会带着?可以直接用slice删除
import qs from 'querystring'
const obj = qs.parse(this.props.location.search.slice(1))
13)react中路由跳转push与replace的区别
push 是堆栈的模式,会留下痕迹,可以返回上一级
replace不会返回上一级,是一种替换,一般用于登录成功后
14)Withrouter
可以加工一个组件,使他具有路由组件的所特有的API,它返回的是一个新组件
