【React系列】初识React-Router

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

React生态圈是极其丰富的，里面有各种各样的轮子可以供我们使用，这些轮子基本可以覆盖我们平时开发所遇到的场景，而对于前端路由的场景，React-Router 则是大家公认的解决方案，本篇文章就准备聊聊这个轮子，废话不多说，开搞！

何为React-Router

React-Router是用于解决前端路由的一种方案，它本身其实是一个核心库，根据不同的使用环境，真实使用的其实是如下两个库：

• React-Router-Dom: 用于 浏览器 场景下的路由解决方案，提供了 hash 和 browser 两种模式
• React-Router-Native: 用于 React Native 场景下的路由解决方案，多用于原生app的开发

需要注意的是这两个库都是默认依赖 React-Router 的，因此不需要单独导入 React-Router

如何使用React-Router

我们这里以 React-Router-Dom 为例，来讲解具体api的使用，在 React-Router-Dom 里，主要提供了如下几个组件：

• BrowserRouter: 利用 pushState、replaceState、popstate 实现的前端路由，url里不含 #

• HashRouter: 利用 hash、hashchange 实现的前端路由，url里包含 #

• Switch: 保证同一个url下只渲染一个路由组件

• Route: 具体的路由配置组件，拥有的属性如下

  • exact: 精确匹配，保证url和path属性完全匹配时才生效
  • component: 路由匹配后，所需要渲染的组件
  • path: 需要匹配的路径
  • render: 路由匹配后，所需要渲染的内容，值为一个返回渲染内容的函数

• Redirect: 重定向组件，拥有的属性如下

  • from: 需要匹配的重定向路径
  • to: 需要重定向的目标路径

举个例子

下面给出实际使用的示例，以便能有更直观的体验

import Reactfrom "react"
import home from './home.jsx'
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"

export default () => { 
    return (
        <BrowserRouter>
            <Switch>
                <Route path='/' exact component={home}></Route>
                <Route path='/about' exact render={()=><span>about</span>}></Route>
                <Redirect to='/'>
            </Switch>
        </BrowserRouter>
    )
}

结语

作为一名react开发者，React-Router是必须掌握的一门技术，这篇文章主要是讲解了以组件的形式如何去使用它，其实它还有其他的使用形式，欲知后事如何，请听下回分解~