react-router基础学习

小代同学
251 阅读4分钟

在介绍 React Router 以前，先区分两个概念：

  • react-router：为 React 应用提供了路由的核心功能；
  • react-router-dom：基于 react-router，加入了在浏览器运行环境下的一些功能。

安装 react-router-dom

以下三种方式都可以

npm install react-router-dom -S

pnpm add react-router-dom -S

yarn add react-router-dom

基础使用

下面介绍一下 React-Router 的一些基本使用

BrowserRouter

BrowserRouter 是最常用的路由方式，即浏览器路由。官方文档也建议将 BrowserRouter 组件用于 Web 应用程序。除了这种方式，React Router 还支持其他几种路由方式：

  • HashRouter：在路径前加入#成为一个哈希值，Hash 模式的好处是不会因为刷新页面而找不到对应路径；
  • MemoryRouter：不存储 history，路由过程保存在内存中，适用于 React Native 这种非浏览器环境；
  • NativeRouter：配合 React Native 使用，多用于移动端；
  • StaticRouter：主要用于服务端渲染时。

NavLink 和 Link

NavLink 和 Link 是导航链接组件，类似于 HTML 中的<a>标签，使用 to 来指定需要跳转的链接。

NavLink 是存在 active 状态的，所以可以为active 状态和非active 状态的导航链接添加样式。

Routes 和 Route

Routes 可以把 Route 包裹起来。

Route 组件可以指定

  • path：页面 URL 应导航到的路径，类似于 NavLink 组件的 to；
  • element：页面导航到该路由时加载的元素。

exact精准匹配

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

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

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

Outlet

一个可以渲染嵌套路由的占位符组件。

Outlet组件用来渲染嵌套路由的占位符，当React Router匹配到一个父路由时，它会尝试渲染该父路由的子路由，而子路由的内容则会通过Outlet组件进行渲染。

import { Outlet } from 'react-router-dom'; 

function MyComponent() { 
    return ( 
        <div> 
            <h1>My App</h1> 
            <Outlet /> 
        </div> 
    ); 
}

动态传值

// 相当于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属性代表应用程序现在在哪，你想去哪。

hook

  • useNavigate 跳转路由
const navigate = useNavigate();
    
const handleClick = () => {
    navigate({
      pathname: '/login',
      search: 'a=1',
    })
}
  • useParams 获取路由参数
  • useSearchParams 获取url参数
const [searchParams,setSearchParams]= useSearchParams(); // 和useState比较相识
  
// 执行结果 ?name=dj&age=20
setSearchParams({
    name: 'dj',
    age: 20
})
const name = searchParams.get('name');
const age = searchParams.get('age');

基础案例

// AppRouter.js
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

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

ReactDOM.render(<AppRouter />, document.getElementById('root'));
avatar
文章
阅读
粉丝