React-router

程序员文章站 2022-04-12 08:08:11

React-router前言:现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件（配对）相关api组件

前言:

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生

前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系
使用React路由简单来说，就是配置路径和组件（配对）

组件的基本使用

安装

npm i react-router-dom
yarn add react-router-dom

BrowserRouter/Route/Link

导入路由的三个核心组件：Router / Route / Link

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

使用 Router 组件包裹整个应用（重要）

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

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return (
      <Router>
        页面内容
      </Router>
    );
  }
}

使用 Link 组件作为导航菜单（路由入口）

<Router>
     <Link to="/home">首页</Link>
     <Link to="/detail">详情页面</Link>
</Router>

使用 Route 组件配置路由规则和要展示的组件（路由出口）

import React, { Component } from "react";

import Home from "./page/Home";
import Detail from "./page/Detail";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default class App extends Component {
render() {
 return (
   <Router>
     <Link to="/home">首页</Link>
     <Link to="/detail">详情页面</Link>

     <Route path="/home" component={Home} />
     <Route path="/detail" component={Detail} />
   </Router>
 );
}
}

组件说明:

Router 组件

包裹整个应用，一个 React 应用只需要使用一次
两种常用 Router：HashRouter 和 BrowserRouter
- HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）
- （推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

Link 组件

用于指定导航链接（a 标签）

to属性:浏览器地址栏中的pathname(location.pathname)

<Link to="/home">首页</Link>
<Link to="/detail">详情页面</Link>

Route 组件

指定路由展示组件相关信息
path属性:路由规则
component属性:展示的组件

Router组件写在哪,渲染出来的组件就展示在哪

<Route path="/home" component={Home} />
<Route path="/detail" component={Detail} />

路由的执行过程

点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。
React 路由监听到地址栏 url 的变化。
React 路由内部遍历所有 Route 组件，使用路由规则（ path ）与 pathname 进行匹配。
当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

默认路由

问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？

默认路由：表示进入页面时就会匹配的路由

默认路由path为：/

<Route path="/" component={Home} />
<Route path="/home" component={Home} />
<Route path="/detail" component={Detail} />

React-router

路由匹配模式

模式匹配
- 问题：当 Link组件的 to 属性值为 “/home”时，为什么默认路由也被匹配成功？

模糊匹配

默认情况下，React 路由是模糊匹配模式
- 模糊匹配规则：只要 pathname 以 path 开头就会匹配成功
- path 代表Route组件的path属性
- pathname 代表Link组件的to属性（也就是 location.pathname）
path 能够匹配的 pathname
- / 可以匹配所有pathname
- /home 可以匹配 /home 或 /home/a 或 /home/a/b/…

精确匹配 exact

问题：默认路由任何情况下都会展示，如何避免这种问题？
给 Route 组件添加 exact 属性，让其变为精确匹配模式
精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由
- 此时，该组件只能匹配 pathname=“/” 这一种情况
  推荐：给默认路由添加 exact 属性

React-router

路由中其他组件介绍

Switch 组件

Switch组件用于包裹Route组件,类似于js中的switch,有一个Route符合就不往下匹配了

记得需要从react-router-dom引入
 //pathname是 /home
 //匹配第一个path /home 符合. 就不再匹配下面的Route了
<Switch>
      <Route path="/home" component={Home} />
      <Route path="/detail" component={Detail} />
      <Route path="/" component={Home}/>
</Switch>

Redirect 组件

重定向组件(渲染Redirect将使导航到一个新的地址,这个新的地址会覆盖 history 栈中的当前地址)

<Router>
	记得需要从react-router-dom引入
    <Link to="/home">首页</Link>
    <Link to="/detail">详情页面</Link>

    <Route path="/home" component={Home} />
    <Route path="/detail" component={Detail} />
    
    {/* <Redirect to="/home"/> */}  或者下面这样
    <Redirect to={{pathname:"/home"}}/>
</Router>

React-router

NavLink

和Link组件的功能是一样的.只是会给对应的a标签添加类名

记得从react-router-dom中引入
  {/* 渲染后的a标签上面会有一个active类名(默认) */}
  <NavLink to="/home">首页</NavLink>
  <NavLink to="/detail">详情页面</NavLink>

React-router

NavLink 配合 activeClassName属性指定类名

import "./App.css"

{/* 渲染后的a标签上面会有一个active类名(默认) */}
<NavLink to="/home" activeClassName="rolls">首页</NavLink>
<NavLink to="/detail" activeClassName="rolls">详情页面</NavLink>

React-router

编程式导航

前提: 被Route渲染的组件,通过props可以获取到三个属性分别是 history, location和match

场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
编程式导航：通过 JS 代码来实现页面跳转
history 是 React 路由提供的，用于获取浏览器历史记录的相关信息

class Login extends Component { 
  handleLogin = () => { 
    // ... 
    this.props.history.push('/login') 
  } 
  render() {...省略其他代码} 
}

history对象

操作历史记录的方法
写在route的组件才有 this.props.history/location/match 而不是说router

push(path,[sate])

(function 类型) 在 history 堆栈添加一个新条目

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h1>首页</h1>
                <button onClick={()=>{
                    this.props.history.push("/detail")
                }}>点击我去 Detail</button>
            </div>
        )
    }
}

React-router

replace()

(function 类型) 替换在 history 堆栈中的当前条目

import React, { Component } from 'react'

export default class Detail extends Component {
    render() {
        return (
            <div>
                <h1>欢迎来到wangkai.Zone</h1>
                <button onClick={()=>{
                    this.props.history.replace("/home")
                }}>点击我去home</button>
            </div>
        )
    }
}

`go(n)`

(function 类型) 将 history 堆栈中的指针调整 n

`goBack()`

- (function 类型) 等同于 go(-1)

`goForward()`

- (function 类型) 等同于 go(1)

location对象

React-router

表示当前程序在哪

pathname

可以获取当前的pathname

 <div>
   <h1>欢迎来到wangkai.Zone</h1>
    <button onClick={()=>{
        console.log(this.props.location.pathname)
        // this.props.history.replace("/home")
    }}>点击我去home</button>
</div>

React-router

search

可以获取到路劲后面的查询字符串 “?rolls=royce num=00”

 <div>
  <h1>欢迎来到wangkai.Zone</h1>
    <button onClick={()=>{
        console.log(this.props.location.search)
        // this.props.history.replace("/home")
    }}>点击我去home</button>
</div>

React-router

state

可以获取到push和replace方法传递过来的第二个参数

React-router

export default class Home extends Component {
    render() {
        return (
            <div>
                <h1>首页</h1>
                <button onClick={()=>{
                    // console.log(this.props.location)
                    // replace也是同样的效果  所以不再做演示
                    this.props.history.push("/detail",{
                        string:"wangkai.zone",
                        num:1234567,
                        object:{},
                        arrat:[]
                    })
                }}>点击我去 Detail</button>
            </div>
        )
    }
}

Match对象

包含匹配url信息

path()

可以获取匹配的path

<div>
    <h1>欢迎来到wangkai.Zone</h1>
    <button onClick={()=>{
        console.log(this.props.match.path)
    }}>点击我去home</button>
</div>

React-router

params()

可以获取路由参数

 <div>
    <h1>欢迎来到wangkai.Zone</h1>
    <button onClick={()=>{
        console.log(this.props.match.params)
    }}>点击我去home</button>
</div>

React-router

withRouter高阶组件

之前说过被Route渲染的组件,通过props可以获取到三个属性分别是 history, location和match,

否则无法获取到history,location和match

withRouter可以帮助我们实现,在非Route渲染的组件中获取到history,location和match

index.js

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

让APP不在route里面

import React, { Component } from "react";

import Home from "./page/Home";
import Detail from "./page/Detail";
import "./App.css"

import {
  // BrowserRouter as Router,
  Route,
  NavLink,
} from "react-router-dom";
class App extends Component {
  render() {
    // 现在App这个插件不在route里面,所以我们去打印观看,他的里面是没有三大属性的
    console.log(this.props)
    return (
      <div>
        <NavLink to="/home" activeClassName="rolls">首页</NavLink>
        <NavLink to="/detail/1" activeClassName="rolls">详情页面</NavLink>

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

        <Route path="/detail/:id?" component={Detail} />
      </div>
    );
  }
}

export default App

React-router

引入withRouter

import {
  Route,
  NavLink,
  withRouter
} from "react-router-dom";

调用withRouter传入组件

const withApp = withRouter(App)

React-router

完整代码

import React, { Component } from "react";

import Home from "./page/Home";
import Detail from "./page/Detail";
import "./App.css"

import {
  Route,
  NavLink,
  withRouter
} from "react-router-dom";
class App extends Component {
  render() {
    // 现在App这个插件不在route里面,所以我们去打印观看,他的里面是没有三大属性的
    console.log(this.props)
    return (
      <div>
        <NavLink to="/home" activeClassName="rolls">首页</NavLink>
        <NavLink to="/detail/1" activeClassName="rolls">详情页面</NavLink>

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

        <Route path="/detail/:id?" component={Detail} />
      </div>
    );
  }
}
const withApp = withRouter(App)
export default withApp

路由组件传参

拼接在pathname后面

  <Link to='/home?a=1&b=2'>home</Link>   // 通过location.search获取  (不推荐)

通过history的push或replace方法的第二个参数传递

通过location.state获取用于变成式导航

<div>
       <h1>首页</h1>
       <button onClick={()=>{
           this.props.history.replace("/detail",{
               string:"wangkai.zone",
               num:1234567,
               object:{},
               arrat:[]
           })
       }}>点击我去 Detail</button>
</div>

通过路由参数传递

// 实现:
// 1. 注册路由参数   :id为注册的路由参数 ?表示参数可有可没有
 <Route path="/detail/:id?" component={Detail} />
// 2. 如何传递 /about后面就是要传递的参数
<NavLink to="/detail/1" activeClassName="rolls">详情页面</NavLink>
// 3. 如何获取
通过match.params可以获取

嵌套路由

React-router

Home

import React, { Component } from "react";


import Item1 from "./Item1"
import Item2 from "./Item2"
import Item3 from "./Item3"
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default class Home extends Component {
  render() {
    return (
      <div>
        <h1>首页</h1>
        <Link to="/home/item1">item1</Link>
        <Link to="/home/item2">item2</Link>
        <Link to="/home/item3">item3</Link>

        {/* 只需要在一级路由后面继续拼接二级路由即可 */}
        <Route path="/home/item1" component={Item1}/>
        <Route path="/home/item2" component={Item2}/>
        <Route path="/home/item3" component={Item3}/>
      </div>
    );
  }
}
// 注意: 如果一级路由不能显示,二级路由也不会显示

App

import React, { Component } from "react";

import Home from "./page/Home";
import Detail from "./page/Detail";
import "./App.css"

import {
  BrowserRouter as Router,
  Route,
  NavLink,
} from "react-router-dom";
export default class App extends Component {
  render() {
    // 现在App这个插件不在route里面,所以我们去打印观看,他的里面是没有三大属性的
    console.log(this.props)
    return (
      <Router>
        <NavLink to="/home" activeClassName="rolls">首页</NavLink>
        <NavLink to="/detail/1" activeClassName="rolls">详情页面</NavLink>

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

        <Route path="/detail/:id?" component={Detail} />
      </Router>
    );
  }
}

React-router

本文地址：https://blog.csdn.net/RollsRoycewk/article/details/109378821

React-router

前言:

相关api

组件的基本使用

安装

BrowserRouter/Route/Link

使用 Router 组件包裹整个应用（重要）

使用 Link 组件作为导航菜单（路由入口）

使用 Route 组件配置路由规则和要展示的组件（路由出口）

组件说明:

Router 组件

Link 组件

Route 组件

路由的执行过程

默认路由

路由匹配模式

模糊匹配

精确匹配 exact

路由中其他组件介绍

Switch 组件

Redirect 组件

NavLink

编程式导航

history对象

push(path,[sate])

replace()

go(n)

goBack()

goForward()

location对象

pathname

search

state

Match对象

path()

params()

withRouter高阶组件

index.js

让APP不在route里面

引入withRouter

调用withRouter传入组件

完整代码

路由组件传参

拼接在pathname后面

通过history的push或replace方法的第二个参数传递

通过路由参数传递

嵌套路由

Home

App

react-router 路由切换动画的实现示例

React-router中结合webpack实现按需加载实例

React-router 4 按需加载的实现方式及原理详解

深入理解react-router 路由的实现原理

react-router实现跳转传值的方法示例

示例React-router 路由切换动画的实现

详解如何给React-Router添加路由页面切换时的过渡动画

react-router刷新页面Cannot GET 问题

react-router实现tab页面切换，并解决选中样式首页始终选中问题

详解升级react-router 4 踩坑指南

`go(n)`

`goBack()`

`goForward()`