react中的路由

路由的基本使用

首先在app.js中引入

import { Route, BrowserRouter as Router,Link } from "react-router-dom"

然后route既表示路由的出口也表示规则，exact表示绝对匹配，component可写可不写

<Route exact path="/index" component={ Index }></Route>

想要跳转用link,to代表去向

<Link to="/">首页</Link> 

重定向组件Redirect

<Redirect from="/" to="/index"></Redirect>

把所有的出口放在switch中，匹配的时候只匹配最上面那一个

路由传参的两种形式

params传参：

<Route exact path="/threater/:id" component={ Threater }></Route>

接收参数：
{this.props.match.params.id}
query传参也叫查询字符串：

<Redirect exact from="/" to="/index?name='wc'&age=100"></Redirect>

接收参数
this.props.location.search接收到的是一个字符串
需要通过转换成对象
let result = new URLSearchParams(this.props.location.search)
result.get(“name”)
如果是用函数创建的则需要导入useLocation().search

路由守卫

通过render

<Route exact path="/cart" render={ ()=>{
    return this.state.isLogin ? <Cart /> :<Login dealLogin={ e=>this._dealLogin(e) }></Login>
                    } }></Route>

实现路由跳转的几种方法

1）首页
2）自定义组件 如下：

 // 定义一个实现跳转的组件
    const CustomLink = (props)=>{
        return (
            <li>
                <Link to={props.path}>{props.name}</Link>
            </li>
        )
    }
    用时：<CustomLink path="/" name="首页" />

3）NavLink 是比Link更加强大 添加选中的样式
用时：<NavLink to="/cart" activeClassName="selected">购物车</NavLink>
只有配置了Route组件，才会给对应的组件中传递history, location, match，如果没有配置，又想要使用history, location, match可以使用
export default withRouter(Mine)
4）编程式导航
this.props.history.push(this.props.path)