React-Router学习笔记

安装React Router

npm install react-router-dom --save

Router的使用

```App.js```
import React from "react"
import {BrowserRouter as Router,Route} from "react-router-dom"

export default class App extends React.Component{
    render(){
        return(
            <div id="App">
                <Router>
                    <Route path="/" component={ 组件名 }>
                </Router>
            </div>
        )
    }
}

React Router匹配规则

使用exact进行单独匹配
    <Router path="/main" component={Main}>
    <Router path="/main/ucenter" component={UCenter}>
    在访问/main/ucenter时，会展示Main和UCenter两个组件的内容
    在main路由中添加 exact
    <Router exact path="/main" component={Main}>
    只有当路由等于/main时，才会展示Main路由的内容


使用strict进行精准匹配
<Router  strict exact path="/main" component={Main}>
只有当路由完全匹配时才会展示内容

使用Switch匹配404页面
<Switch>
    <Router path="/main" component={Main}>
    <Router path="/main/ucenter" component={UCenter}>
    <Router component={NotFound}>
</Switch>

当输入不存在的路由时会匹配到404页面

导航栏跳转
Nav.jsx
使用NavLink组件替换导航栏Link组件

<div>
    {/*默认选中样式ClassName为active*/}
    <NavLink to="/"}>首页</NavLink>
    {/*修改选中ClassName为selected*/}
    <NavLink activeClassName="selected" to="/download">下载</NavLink>
    {/*直接设置选中样式*/}
    <NavLink activeStyle={{color:"red"}} to="/about">关于</NavLink>
</div>

在跳转时可以添加属性

<Link to={{
    pathname:"/main",
    search:"?sort=name",
    hash:"the-hash",
    state:{flag:"flag"} /*隐性传递参数 取值：props.localtion.state.flag*/
    }}

路由传参

<Route to="/download/:id" />
此时如果不传递参数，则会出现404页面
<Route to="/download/:id?" />
在参数后加?解决该问题
取参：
    this.props.match.params.id
    

读取keyValue形式参数
链接:http://127.0.0.0/download?id=222&name=file

读取id和name
第一种方式
    const params = new URLSearchParams(props.localtion.search)
    let id = params.get("id"),name = params.get("name")
第二中方式
    import querystring from "querystring"
    const value = querystring.parse(props.localtion.search).replace("?","")
    let id = value.id,name = value.name

页面重定向

当访问/index路由时会被重定向到/home
<Router from="/index" to="/home" >

在页面不满足条件时跳转，比如用户为登陆跳转到登陆页面

import React from "react"
import {Redirect} from "react-router-dom"

export default class Shop extends React.Component{
    state = {
        isLogin:false
    }
    const {isLogin} = this.state
    render(){
        return(
          isLogin ?
          <div>Shop页面</div>
          :
          <Redirect to="/login" />  
        )
    }
}

页面重定向 push和replace

import React from "react"


export default class Shop extends React.Component{
    
    
    backToHome = ()=>{
       /*第一种方式*/
       this.props.history.push("/")
       /*第二种方式*/
       this.props.replace("/")
       /*两种方式的区别在于push叠加的上一次页面依然存在，replace是替换，
       *上一次的页面不存在了*/ 
    }
    
    
    render(){
        return(
            <div>
                <button onClick={this.backToHome}>回到首页</button>
            </div>
        )
    }
}

询问是否确定离开

import React from "react"
import {Prompt} from "react-router-dom"


export default class Shop extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name:"",
        }
    }
    
    render(){
        return (
            <div>
                <Prompt when={this.state.name} message={"真的要离开该页面吗?"}/>
                <input type="text" value={this.state.name} onChange={(e) => {this.setState({name:e.target.value})}}/>
            </div>
        )
    }
}