react 路由详解

路由

根据不同的url 来切换对应的组件

实现spa（单页面应用）应用：

整个项目只有一个完整页面

页面切换不会刷新页面（不会感觉页面的闪烁 更加贴近原声应用的体验）

当前版本 V5

一、 路由-分类

1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。

2、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

二、路由模式-HashRouter 和 BrowserRouter

1、HashRouter （hash模式）

url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。刷新不会丢失

2、BrowserRouter（历史记录模式 ）

是通过历史记录api来进行路由的切换的很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。刷新会丢失404（上线中会出现问题 本地开发中不会）

三、路由-link与switch

1、Link 主要API是to，to可以接受string或者一个object，来控制url。

2、NavLink 它可以为当前选中的路由设置类名、样式以及回调函数等，to属性跳转路径activeClassName当元素处于活动状态时应用于元素的样式

四、路由基本使用

路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

1.下载路由模块
npm install --save react-router-dom

2.在index.js引用路由模块
import { BrowserRouter} from ‘react-router-dom’;

3.在index.js使用路由模式包裹跟组件

4.在app.js中引用路由出口

import {Route} from “react-router-dom”

5.配置

五、路由模式—hash模式

要切换hash模式只需要在 index.js设置路由模式即可

import {
      BrowserRouter } from "react-router-dom"

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

六、路由导航

使用Link组件即可 to属性就是地址

使用NavLink 会比link多有个class 如果不喜欢默认的类名active 可以手动设置选中Class方便样式设置

import React, {
      Component } from 'react'
import {
     Route,Link,NavLink,Switch,Redirect } from "react-router-dom"
import Home from "../views/home.jsx"
import My from "../views/my.jsx"
import List  from "../views/list.jsx"
import Democ  from "../views/democ.jsx"

import Pagelink from "../components/pagelink.jsx"
export default class index extends Component {
     
    render() {
     
        return (
            <div>
                <Link to="/">home</Link><br/>
                <Link to="/my">my</Link><br/>
                <NavLink to="/list" activeClassName="a">list</NavLink>
                {
     /*  */}
                <hr></hr>
            <Switch>
                <Route path="/home" exact component={
     Home}></Route>
                <Route path="/my" component={
     My}></Route>
                <Route path="/list" component={
     List}></Route>


                {
     /* 设置重定向 */}
                <Redirect from="/" to="/home" exact></Redirect>
                {
     /*404页面写在最下面，不需要设置path */}
                <Route component={
     Democ}></Route>
                </Switch>
            </div>
        )
    }
}

注意：如果在vscode的终端中启动项目可能会无效 在外部cmd中启动

七、exact 属性 强制匹配

exact代表当前路由path的路径采用精确匹配，比如说Home的path如果不加上exact,那么path="/about"将会匹配他自己与path="/“这两个，所以一般path=”/"这个路由一般会加上exact，另外需要注意一点的是嵌套路由不要加exact属性，如果父级路由加上，这里例如topics加上该属性，他下面的子路由将不会生效，因为外层强制匹配了。

八、路由–404页面

有的时候用户可能会错误修改相关url 但是并没有相关路由 解决方式设置404路由组件 但是有问题不管到那个页面都会有这个404路由组件

{/*404页面写在最下面，不需要设置path */}

九、< Switch>

为了解决route的唯一渲染，它是为了保证路由只渲染一个路径。
是唯一的，因为它仅仅只会渲染一个路径，当它匹配完一个路径后，就会停止渲染了。

<Switch>
                <Route path="/home" exact component={
     Home}></Route>
                <Route path="/my" component={
     My}></Route>
                <Route path="/list" component={
     List}></Route>
                {
     /* 设置重定向 */}
                <Redirect from="/" to="/home" exact></Redirect>
                {
     /*404页面写在最下面，不需要设置path */}
                <Route component={
     Democ}></Route>
  </Switch>

但是初始化的时候还是404组件

十、路由–重定向

导入Redirect
import { BrowserRouter,Route,Link,NavLink,Redirect } from ‘react-router-dom’

定义重定向路径

十一、 二级路由

1 、在子页面中引用路由模块

import {Route,Link} from ‘react-router-dom’;

2.设置相关规则 与路由导航

home

3、 Home

import React, {
      Component } from 'react'
import {
     Route,NavLink} from 'react-router-dom'
import Era from "./era"

export default class home extends Component {
     
    
    render() {
     
        return (
            <div>
                home <br></br>

                <NavLink to="/home/era">homeson</NavLink>
                <Route path="/home/era" component={
     Era}></Route>

            </div>
        )
    }
}

十二 路由跳转

1、push方法在路由页面中跳转 this.props.history.push("/xxxx")

 <button onClick={
     ()=>{
     this.props.history.push("/list")}}>去list</button>
 <button onClick={
     ()=>{
     this.props.history.goBack()}}>back</button> //返回上一级

会有报错：

Type error:Cannot read property of “push” of undefine

解决方式：引用withRouter组件

import {NavLink,Link,withRouter} from “react-router-dom”

export default withRouter(pagelink)

十三、路由–withRouter

withRouter作用是让不是路由切换的组件也具有路由切换组件的三个属性(location match history)

监控路由的变化 在app.js中添加看看效果
props.history.listen((location)=>{
//locatin.pathname 会根据路由的变化而变化
})

十四、 路由–js跳转

replace() 替换当前路径

goBack()后退

goForward()前进

十五、 路由—传参params方式

1\在 Router标签后面拼接传递参数的名字

2、 设置发送的数据

list

3、在需要接受的路由组建中接受

this.props.match.params.name

十六、路由—传参params方式优缺点

优势 ： 刷新地址栏，参数依然存在

缺点 ： 只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

十七、 路由—传参state**//***

1、在Link中设置发送的数据

2、在需要接受的路由组建中接受

console.log(this.props.location. state.name)

优势：传参优雅地址栏不显示传递的数据，传递参数可传对象；

缺点：刷新地址栏，参数丢失

十八、路由render渲染写法

修改Route 里面的组件调用方式为:
render={(props)=>{return <组件/>}}
render调用一个函数那么我们就可以决定什么时候渲染他 同时传入props那么就可以在路由组件中使用history: {…}, location: {…}, match: {…}这几个对象

<Route path="/rr" render={
     (props)=>{
     

    return true? <Renderrouter {
     ...props} mes="render"/>:<Redirect to="7iku"/>}}>

</Route>

路由render渲染写法传递数据 取值

this.props.mes

路由验证

如果想对路由进行验证的话只需要在函数中进行逻辑编写 既可以设置具体渲染那个组件

return true or false