react路由的简单使用

1、安装路由

使用之前先安装一下：npm install react-router-dom，官方文档地址：reactrouter.com/web/guides/…

2、导入路由相关

在相关组件中导入路由

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

（1）、HashRouter：表示一个路由的跟容器，将来所有和路由相关的东西，都将包裹在HashRouter中，一个网站中，只需要使用一次HashRouter就好了 

（2）、Route：表示一个路由规则，在Route上有2个比较重要的属性：path、component；Route等同于Vue中的每一个路由规则（{path:'/index',component: () => import('@views/index/index')}）

（3）、Link：表示一个路由的链接，等同于Vue中的 <Router-Link to=""></Router-Link>

import React, { Component, Fragment } from 'react'
import { HashRouter, Route, Link  } from 'react-router-dom'
import TestLink1 from './views/TestLink1.js'
import TestLink2 from './views/TestLink2.js'

class TodoList extends Component {
    constructor(props){
        super(props)
    }

    render() {
        return (
            <Fragment>
                <HashRouter>
                    <hr/>
                    <Link to="/TestLink1">链接1</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Link to="/TestLink2">TestLink2</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <hr/>

                    <Route path="/TestLink1" component={TestLink1}></Route>
                    //加入exact表示精确匹配
                    <Route path="/TestLink2" component={TestLink2} exact></Route>   
                </HashRouter>
            </Fragment>
            
        )
    }
}


export default TodoList

注意： ​

a、在HashRouter内部只能有一个根节点；在一个网站中，只需要使用唯一的一次 即可 ​

b、Route创建的标签，就是路由的规则，path表示要匹配的路由，component表示要展示的组件；Route是一个占位符， ​ 表示将来匹配到的组件都放到这个位置 ​

c、默认情况下，路由是模糊匹配的，也可以进行精确匹配，只需要加上 exact属性即可

3、简单的路由传参

（1）、通过params传参

优点：刷新地址栏，参数依然在； 缺点：只能穿字符串，如果传的值太多的话，url会变得长而丑陋

this.state = {
	info: {
		id: 1,
		type: 2
	}
}
<Link to={`TestLink1/${info.id}/${info.type}`}>链接1</Link>
<Route path="/TestLink1/:id/:type" component={TestLink1} exact></Route>

或者使用js的方式：this.props.history.push({pathname:`/TestLink1/${info.id}/${info.type}`})

在另一个页面中这样接收

console.log(this.props.match.params)

（2）、useParams传参

注意：在react17.x中，userParams的方式只能在普通function组件中获取参数，在class创建的组件中是不能使用的

this.state = {
	info: {
		id: 1,
		type: 2
	}
}
<Link to={`TestLink1/${info.id}/${info.type}`}>链接1</Link>
<Route path="/TestLink1/:id/:type" component={TestLink1} exact></Route>

获取参数方法

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

export default function TestLink1{
    // eslint-disable-next-line no-useless-constructor
    constructor(props){
        super(props)
        this.state = {}
    }
    render(){
        let { id } = useParams()
        return(
            <div>
                我是TestLink1{id}
            </div>
        )
    }
}

（3）、query传参
这种方式说实话我是很少用到的，因为刷新的时候参数就不见了

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
路由跳转并传递参数：
    链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
    js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})
获取参数： this.props.location.query.name

（4）、state传参

刷新页面后参数不消失，state传的参数是加密的，比query传参好 ；但是state 传参的方式只支持Browserrouter路由，不支 持hashrouter

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
路由跳转并传递参数：
    链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link> 
    js方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})
获取参数： this.props.location.state.name