【React】入门第九天 - 路由和参数

在这里插入图片描述

路由

路由根据url的不同切换对应的组件实现SPA单页应用，更加接近于原生体验

下载

npm i --save react-router-dom

路由分为2中 react-router和react-router-dom，第一种只提供了核心api

路由模式

hash模式-> HashRouter 刷新的时候页面不会丢失带#号

Brower模式->BrowserRouter 通过历史记录api来进行路由切换，刷新会丢失

全局引用

在`index.js

import {
    
    BrowserRouter,HashRouter} from "react-router-dom"
// 路由模式包裹根组件
ReactDOM.render( <HashRouter> <App /> </HashRouter>, document.getElementById('root'));

跳转

在App.js添加

<Route path="/home" component = {
    
    Home} />

运行后再浏览器输入/home路径后，即可跳转。

子路由

在父组件添加Route子路由要写上父路径，不然会变成同级路由，完整代码

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

import HomeA from "./SubHomeA"
import HomeB from "./SubHomeB"

class Home extends Component {
    
    
    constructor(props) {
    
    
        super(props)

        this.state = {
    
    
        }
    }

    render() {
    
    
        return (
            <div> 主页 
                <div></div>
                <div>
                    <div><NavLink to="/home/a" >HomeA</NavLink></div>
                    <div><NavLink to="/home/b" >HomeB</NavLink></div>
                </div>
                <Route path="/home/a" component= {
    
    HomeA}></Route>
                <Route path="/home/b" component= {
    
    HomeB}></Route>
            </div> 
            
        )
    }
}

export default Home

普通按钮具备路由功能

{
    
    /* 使用普通按钮跳转页面 */}
<div><button onClick={
    
    ()=>{
    
    this.props.history.push("/home/a")}}>Homea</button></div>

路由传参

传递字符串

需要在路由的规则中设置接收的传递参数:xxx表示

<Route path="/user/:userId" component = {
    
    User} />

发送参数直接在跳转路径后编写

<NavLink to="/user/abcdefghijklmn123">User</NavLink>

接收props.match.params.xxx

componentDidMount(){
    
    
    console.log(this.props.match.params.userId)
    this.setState({
    
    
        userId: this.props.match.params.userId
    })
}
constructor(props) {
    
    
    super(props)
    this.state = {
    
    
        userId : ""
    }
}
render() {
    
    
    return (
        <div>用户列表
            <p>{
    
    this.state.userId}</p>
        </div>
    )
}

传入对象

使用query方式

不需要修改路由规则，不需要进行参数配置
直接发送数据

<NavLink to={
    
    {
    
    pathname:"/profile", query:{
    
    name:"laoshiren"}}}>Profile</NavLink>
...
<Route path="/profile" component = {
    
    Profile} />

使用this.props.location.query.xxx

console.log("props.location.query.xxx")

完整代码

import React, {
    
     Component } from 'react'

class Profile extends Component {
    
    
    constructor(props) {
    
    
        super(props)
        this.state = {
    
    
            query:{
    
    }
        }
    }

    componentDidMount(){
    
    
        // 将路由参数传递给state
        console.log(this.props.location.query)
        this.setState({
    
    
            query:this.props.location.query
        })
    }
    
    // 页面显示参数 key: value的形式
    getInfo(Param) {
    
    
        var domArr = [];
        Object.keys(Param)
            .map( (keyName,index)=>{
    
    
                domArr.push(<div key= {
    
    index} >{
    
    keyName} - <span>{
    
    Param[keyName]}</span> </div>)
            } )
        return domArr
    }

    render() {
    
    
        return (
            <div>信息
                <div></div>
                {
    
     this.getInfo(this.state.query) }
            </div>
        )
    }
}

export default Profile