【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>

路由传参

---

传递字符串

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

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

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

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

3. 接收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方式

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

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

3. 使用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