react-router基础

hello world

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

function Index() {
    return <div>index</div>
}

function List() {
    return <div>list</div>
}

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to="/list/">列表</Link>
                </li>
            </ul>

            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './AppRouter';

ReactDOM.render(<AppRouter />, document.getElementById('root'));

exact精准匹配

exact从字面上就很好理解，是精准匹配的意思，就是你的路由信息要完全匹配成功，才可以实现跳转。

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

这个路由只有在 path 是 / 时才会被触发

动态传值

// 相当于a链接
<Link to="/list/123">列表</Link>

// 展示子组件
<Route path="/list/:id" component={List} />

import React, { Component } from 'react'

export default class List extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    UNSAFE_componentWillMount() {
        console.log(this.props.match)
    }

    render() {
        let id = this.props.match.params.id
        return (
            <div>List -> {id}</div>
        )
    }
}

打印this.props.match可以发现

• patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
• url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
• params：传递过来的参数，key和value值。

redirect

• 标签式重定向: 就是利用 Redirect 标签来进行重定向，业务逻辑不复杂时建议使用这种。
• 编程式重定向: 这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功挑战到会员中心页面。

重定向和跳转有一个重要的区别，跳转可以用浏览器的回退按钮返回上一级而重定向是不行的

标签式重定向案例

• 1、新建一个home组件
• 2、在 AppRouter.js 文件中引入这个组件

import Home from './components/Home'
<Route path='/home' component={Home} />

• 3、在 Index.js 文件引入Redirect，并重定向到Home组件

import { Redirect } from 'react-router-dom'
<Redirect to='/home' />

编程式重定向案例

在生命周期钩子函数中加入重定向代码

this.props.history.push('/home')

路由组件

对于web项目，react-router-dom 提供了 BrowserRouter 和 HashRouter 路由。如果你有一个响应请求的服务器，则你应该使用 BrowserRouter ，如果你使用的是静态文件的服务器，则应该使用 HashRouter。

路由匹配组件有 Route 和 Switch。Route 的作用是在 location 和 path 属性匹配时在此处渲染 React 组件，通过 component、render 和 children 三个属性来指向渲染组件，component 属性通常指向一个现存的组件，render 只有在需要传递参数给渲染组件时使用。Switch不是必须的，用于将Route组件分组并选择一个与当前地址匹配的第一个Route。

导航组件有 Link、NavLink 和 Redirect 三个组件你用于导航。Link 组件会在Html中创建一个a标签，to属性指向一个导航地址。

Router：所有路由器组件的公用底层实现，通常我们会使BrowserRouter等高级组件代替。

BrowserRouter：使用 HTML5 历史 API 记录（ pushState，replaceState 和 popstate 事件）的 使您的UI与URL保持同步。

Route：作用是在location和Route的path属性匹配时，在此处呈现UI。如有Route没有path会一直与它最近的父级匹配。

Switch：用于将Route或Redirect组件分组，选择第一个与地址匹配的Route渲染。

Link：提供可访问的导航，会在html中创建a标签。

match属性：match对象中包含了如何匹配URL的信息。

history属性：history对象实现对session历史的管理。

location属性：location属性代表应用程序现在在哪，你想去哪。