react路由

基本路由的使用

第一步:安装react-router-dom包

npm i react-router-dom

第二步：引入

import {Route,Link} from 'react-router-dom'

第三步：编写路由链接

 <Link className="list-group-item" to="/about">About</Link>

第四步：注册路由

<Route path="/about" component={About}/>

第五步：外层index.js包裹BrowseRouter或者HashRouter

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
    <BrowserRouter><App/></BrowserRouter>
    ,document.getElementById('root'))

一般组件和路由组件

一般组件

1. 写法不同

<Home />

路由组件

<Route path="/about" component={About}/>

2. 存放的位置不同
   一般组件：写组件标签传递什么，就能this.props收到什么
   路由组件：接收到三个固定的属性

    history:
    	action: "PUSH"
    	block: ƒ block(prompt)
    	createHref: ƒ createHref(location)
    	go: ƒ go(n)
    	goBack: ƒ goBack()
    	goForward: ƒ goForward()
    	length: 12
    	listen: ƒ listen(listener)
    	location: {pathname: "/about", search: "", hash: "", state: undefined, key: "5zmuyq"}
    	push: ƒ push(path, state)
    	replace: ƒ replace(path, state)
    location:
    	hash: ""
    	key: "5zmuyq"
    	pathname: "/about"
    	search: ""
    	state: undefined
    match:
    	isExact: true
    	params: {}
    	path: "/about"
    	url: "/about"
   

NavLink

<NavLink activeClassName="mystyle" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="mystyle" className="list-group-item" to="/home">Home</NavLink>
                    

NaviLink可以自定义activeClassName属性，可以设置自己的样式，但是如果引入的bootstrap会有较高的权重，会出现闪现的状况，在对应样式属性加上! important;即可
简单得NavLink封装

{/* 编写路由链接 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

MyNavLink组件

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

export default class MyNavLink extends Component {
    render() {
        return (
            // this.props.children就是父组件得标签体内容
            <NavLink activeClassName="mystyle" className="list-group-item" {...this.props}>{this.props.children}</NavLink>
        )
    }
}

Switch

作用：匹配第一个to="/about",不再匹配第二个to="/home"

{/* 编写路由链接 */}
<Switch>
     <MyNavLink to="/about">About</MyNavLink>
     <MyNavLink to="/home">Home</MyNavLink>
     <MyNavLink to="/home"></MyNavLink>
 </Switch>
                    

二级路由第二次刷新，boostrap样式丢失问题

<MyNavLink to="/atguigu/about">About</MyNavLink>
<MyNavLink to="/atguigu/home">Home</MyNavLink>

正常请求：

http://localhost:3000/atguigu/css/bootstrap.css          

异常请求：

http://localhost:3000/atguigu/css/bootstrap.css

解决方法：

1. public/index.html 中引入样式不写 ./ ，而是写成/
2. public/index.html 中引入样式不写 ./ 写成%PUBLIC_URL% (常用)
3. 使用HashRouter包裹

路由的模糊匹配

路由默认是模糊匹配:输入的路径必须包含要【匹配的路径】，且顺序要一致
开启严格匹配

<Switch>
     <MyNavLink exact={true} to="/about">About</MyNavLink>
     <MyNavLink exact={true} to="/home">Home</MyNavLink>
 </Switch>

严格匹配不要随意开启，需要再开，有些时候开启会导致无法继续匹配二级路由

redirect的使用

1. 一般卸载所有路由注册的最下方，当所有路由无法匹配时，跳转到redirect指定的路由
2. 具体编码：

<Route path="/atguigu/about" component={About}/>
<Route path="/atguigu/home" component={Home} />
<Redirect to="/about"/>

路由组件参数传递

1. 向路由组件传递params参数
   
   取数据
   
   总结：
   
2. 向路由组件传递search参数
   
   querystring库需要引入

import qs from 'querystring'
obj = {id:'01',age:23}
qs.stringfy(obj)//将对象转换为id=01&age=23的形式

s1 = 'id=01&age=20';
qs.parse(s1)//将search参数转换为{id:'01',age:23}的形式
/*上述this.location.search取出来后*/ 
qs.parse(search).slice(1)//slice(1)将问号去掉

3.向路由组件传递state参数