React中路由基本&高级使用

转载

mb5fdb128f2dba9 2021-09-24 15:26:00

文章标签 自定义 web开发开发人员插件库 html 文章分类 代码人生

React中路由基本&高级使用

一、基本使用

下载路由插件 react-router-dom

npm install react-router-dom

路由前言：

在原生的html中，靠<a/>跳转不同的页面

在React中靠路由链接实现切换组件

react-router-dom的理解

react-router给web开发人员、native原生开发人员、还有其他开发人员都提供了react-router这个插件

但是web开发人员的化，其实叫做 react-router-dom

（1）它是react的一个插件库（一般react-xxx都是react的一个插件库的）

（2）专门用来实现一个SPA应用（single page 单页面应用），也就是单页面多组件，不像多页面那样每次都要重新刷新页面（页面都抖动，所以要防抖）

路由器是用来管理路由的设备

import React, { Component } from 'react'
import {Link, Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
                </div>
                    <div className="row"> 
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                <Link className="list-group-item" to="/about">About</Link>
                                <Link className="list-group-item" to="/home">Home</Link>
                            </div>
                        </div> 
                        <div className="col-xs-6">
                        <div className="panel">
                        <div className="panel-body">
                            <Route path="/about" component={About}/>
                            <Route path="/home" component={Home}/>
                        </div>
                        </div>
                    </div>
                    </div>
            </div>
        )
    }
}

使用react-router-dom插件中的Link来实现路由跳转
- Link标签中的to属性，用小写的路由
使用react-router-dom插件中的Route来注册组件

上面的代码会报错：

报错的是Link和Route要用一个Router来包住

但是并不是直接用一个Router标签来把Link和Route直接包住

Router路由器分为两种：BrowserRouter和HashRouter，也就是histroy和hash，所以要引入BrowserRouter或者HashRouter，而不是引入Router，官方报错中没说明白的

之所以要被同一个Router保住，因为这样才是一体的，才能那边改变路由后这边注册对应的路由并切换

但是为了不每次注册组件都要用Router保住，不如 一劳永逸

解决：因为所有的组件上一级都是App.js，而App.js本身也有路由，那么我们就在全部组件和App.js的上一层，也就是index.js文件中的<App/>用Router包裹就行

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>, 
document.getElementById('root')
)

Router的分类：

histroy和hash：

hash（描点）路由，在#号后面的都不会作为向服务器请求的路径

二、NavLink的使用

前言：

之所以有了Link还要NavLink，是因为Link不带触发事件（也就是点击触发之后没有样式）

默认activeClassName="active" 如果没写这个属性的话，默认会添加activeClassName="active

<NavLink activeClassName="gogocj" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="gogocj" className="list-group-item" to="/home">Home</NavLink>

三、封装NavLink

NavLink是Link的升级版

NavLink默认了active的属性，也可以在标签上定义激活路由的样式

默认activeClassName="active" 如果没写这个属性的话，默认会添加activeClassName="active"

如果使用了bootstrap的话，还要自定义触发样式的话，就要在自定义的后面添加 !important 来添加权限

组件：

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

export default class MyNavLink extends Component {
    render() {
        return (
            <NavLink activeClassName="gogocj" className="list-group-item" {...this.props} />
        )
    }
}

使用：

 <MyNavLink to="/about">About</MyNavLink>

其中传递过来的 About，可以在组件中通过this.props.children获取到。而/about，可以通过this.props.to获取到
所以传递给MyNavLink组件的包括标签中属性的to，或者是标签体About，都可以通过props获取到，所以传递给NavLink就可以直接用{...this.props} 来获取到
- 所以等价于
```
<NavLink activeClassName="gogocj" className="list-group-item" to="/about" children="About" />
```
NavLink中的children属性也是表示标签体内容的

四、Switch的使用

为什么要使用：

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

因为定义了两个path都是/about都是路由，最后的结构是

当路由是/about，About和Test组件都展示出来，但是其实我们并不想要不同组件在同一个路由呈现，是一个很错误的设计模式，所以也是为了性能，比如说：

 <Route path="/about" component={About}/>
 <Route path="/home" component={Home}/>
  <Route path="/home1" component={Home1}/>
   <Route path="/home2" component={Home2}/>
    <Route path="/home3" component={Home3}/>
     <Route path="/home4" component={Home4}/>
      <Route path="/home5" component={Home5}/>
       <Route path="/home6" component={Home6}/>
        <Route path="/home7" component={Home7}/>
         <Route path="/home8" component={Home8}/>
 <Route path="/about" component={Test}/>

这样的话，因为路由是从上到下遍历的，所以要呈现/about的话，要经过很多遍历，特别浪费性能

所以就定义了Switch，只要碰到第一个满足的path就立马停止遍历过程！

实现：直接在注册路由的外面添加一个 Switch标签包裹就行

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

五、组件的分类

一般组件（就是我们引入之后，直接通过标签进行使用）
路由组件（就是我们在Route中注册的，只有path路径等于什么的情况下，才会显示这个组件

路由组件放pages文件夹

一把组件放在components文件夹

路由组件和一般组件的区别:

（1）路由组件会收到 history、location、match重要的路由属性

history:

　　go: f go(n)

　　goBack: f goBack()

　　goForward: f goForward()

　　push: f push(path, state)

　　replace: f replace(path, state)

location:

　　pathname: "/about"

　　search: ""

　　state: undefined　　

match:

　　param: {}

　　path: "/about"

　　url: "/about"