React学习笔记之路由

时间：2024-10-09 07:37:45

React学习笔记之路由

react中的路由和vue中的路由理念大致相似，但由于两大框架的不同，有一定差别。
就像Vue有Vue-router，react也有自己的路由实现：React-router

react-router-dom

react-router-dom是适用于浏览器环境的再次封装

安装

npm install react-router-dom --save
  • 1

基本使用

BrowserRouter

要使用路由，必须将页面包裹在BrowserRouter标签中，包裹在BrowserRouter中的组件会拥有一个history属性，路由正是通过history对象实现的

Link

Link标签是封装过后的a标签，可以理解为是一个链接，给定的to属性表示要跳转到的路由

<Link  to="/about">About</Link>
  • 1

Route

Route标签是路由组件组件的容器，用于匹配路由并展示相应的路由组件，path属性表示匹配的路由，component表示绑定的路由组件

<Route path="/about" component={About}></Route>
  • 1

基本的路由实现如下

import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import Category from "./category";
import User from "./user";
import Article from "./article";
class Home extends Component {
    state = {};
    render() {
        return (
            <BrowserRouter>
                <div className="home">
                    <header className="header">头部</header>
                    <div className="container">
                        <nav className="left">
                            <Link to="/category">栏目管理</Link>
                            <Link to="/article">文章管理</Link>
                            <Link to="/user">用户管理</Link>
                        </nav>
                        <div className="right">
                            <Route path="/category" component={Category}></Route>
                            <Route path="/article" component={Article}></Route>
                            <Route path="/user" component={User}></Route>
                        </div>
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}

export default Home;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

NavLink

NavLink是一个特殊的Link，在被点击之后，默认会给NavLink追加一个active类，用于实现点击之后改变的样式的效果。
可以通过activeClassName=""来改变追加的类名

<NavLink activeClassName="active111" to="/home">Home</NavLink>
  • 1

路由匹配

switch

默认情况，匹配路由时，如果有出现同名的路由，会将两者同时匹配。
所以在使用时，通常要在路由外包裹一层Switch标签，在switch标签中，当路由匹配到一个组件时，就不会继续向下匹配。

<Switch>
    <Route path="/category" component={Category}></Route>
    <Route path="/article" component={Article}></Route>
    <Route path="/user" component={User}></Route>
</Switch>
  • 1
  • 2
  • 3
  • 4
  • 5

精确匹配

默认在匹配路由的时候，是将路径按照/分割成一个个单元，从前向后匹配，只要路径的前面部分满足route的path，就不再管路径后面的内容，就比如

<MyNavLink to="/home/1/2/3">Home</MyNavLink>
  • 1
  • 2

可以匹配

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

但如果你希望路由能精确匹配，只有在路径完全一致时才匹配，则可以用到精确匹配（exact）

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

Redirect

在实际项目中，我们进入web通常需要默认显示某个路由，这时需要用到redirect

<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Route path="/list" component={List}/>
    <Redirect to="/home"/>
</Switch>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

路由嵌套

路由嵌套，需要路由嵌套式，只需要在父路由中使用路由，并且在Route的path中加上父路由的path即可

父路由

<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
</Switch>
  • 1
  • 2
  • 3
  • 4

子路由

<Switch>
    <Route path="/home/user" component={user}/>
    <Route path="/home/list" component={List}/>
</Switch>
  • 1
  • 2
  • 3
  • 4

路由传参

react路由中有三种传参方式

params传参

prams传参，参数会显示在url上，同时需要声明你传递的参数


<Link to='/home/user/1/zhangsan'>张三</Link>

{/* 声明params参数 */}
<Route path="/home/user/:id/:name" component={Detail}/>
  • 1
  • 2
  • 3
  • 4
  • 5

接收参数时，参数在中

query传参

<Link to='/home/user?id=1&name=zhangsan'>张三</Link>
  • 1

Link标签的to属性也可以传递一个对象，和上面的方式效果一样

<Link to={{ pathname: '/home/user', search: ({ id: 1, name: 'zhangsan' }) }}>张三</Link>
  • 1

接受参数时，参数在中

state传参

<Link to={{pathname:'/home/user',state:{id:1,name:'zhangsan'}}}>张三</Link>
  • 1

接受参数时，参数在中

编程式导航

路由组件中的history对象具有一些api方法用于操作路由

push()

往历史记录中添加一项

this.props.history.push(`/home/user`,{id,name})
  • 1

replace()

将当前记录替换

this.props.history.replace(`/home/user`,{id,name})
  • 1

go(n)

this.props.history.go(n)
  • 1

n>0表示前进，n<0表示后退

goBack()

后退

this.props.history.goBack()
  • 1

goForward()

前进

this.props.history.goForward()
  • 1

withRouter

和vue不同的是，vue的实例都有$router对象，可以随意进行路由跳转。而在react中，只有路由组件的实例具有history对象，所有在普通组件中，如果要使用编程式导航跳转路由，withRouter()来加工一下组件

import {withRouter} from 'react-router-dom'
//在导出组件时，使用 withRouter(Header)加工组件使其具有history对象属性
export default withRouter(Header)
  • 1
  • 2
  • 3

相关文章