你了解react-router-dom吗？

雲靉
275 阅读3分钟

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

辛酸程序员前言

以前总觉得自己是面向百度、面向谷歌开发的程序员，到这一步已经很可怕了，但是越来越发现，面向公司内部框架开发是最可怕的，刚开始学习一门语言的那种津津有味的感觉已经逐渐消失殆尽，慢慢得你就会发现，如果你一直忙于业务开发，最基础的原理你都不会，以后的路就断了。

很感谢你能看到这里，下面我们就开始react-router-dom的简单入门吧。

步步道来

1、react-router-dom是干什么用的？

react-router你肯定知道，但是你见过项目里有需要直接安装react-router依赖包的吗？
react-router是基于react的核心路由依赖库；
react-router-dom是基于react-router封装的web应用的路由管理库，它添加了浏览器运行相关的路由操作处理方法，如果是开发react-native应用的，路由管理就是基于react-router-native的。

2、react-router-dom暴露了哪些东西给我们用呢？

image.png

  • 透传导出了react-router很多核心方法例如Router、Routes、Route，包括一些hooks，比如useLocation、useHref、useMatch等等。
  • 结合浏览器的history对象封装了BrowserRouter、HashRouter、Link、NavLink等方法

3、写个demo展示一下react-router-dom的基本使用

import React from 'react';
import { Routes, Route, Link, BrowserRouter } from 'react-router-dom';
import './App.css';

function App () {
  return (
    <div className="App">
      <header className="App-header">
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
          </Routes>
        </BrowserRouter>
      </header>
    </div>
  );
}

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the Home!</h2>
        <Link to="/about">About</Link>
    </>
  );
}

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the About!</h2>
        <Link to="/">About</Link>
    </>
  );
}

export default App;
代码解析及注意事项
  1. 这里我们使用BrowserRouter实现了App的路由管理，注意必须用BrowserRouter或HashRouter来包裹Routes组件，否则无法使用路由管理，所有的路由管理都是基于~Router的
  2. 在Routes组件下注册了两个路由组件，一个是根目录的'/'导航Home组件，一个是about导航About组件；
  3. Link组件中用to携带路由的path即可跳转至指定路由组件页面
BrowserRouter和HashRouter的区别？

两者虽然都是通过控制url和UI界面保持同步的，但是表现形式却不一样：

  • HashRouter是通过location的hash值来实现跳转的，它的url是带'#'的，利用hashchange方法来监听页面URL的hash值变化执行某些操作而不会刷新页面；
  • 而BrowserRouter是基于html5的history API来实现的，url不带'#',使用的时候需要后端做写配置，history对象是用来记录用户在浏览器中的导航记录的，通过history.pushState()推送历史记录，只改变地址栏路径不会触发页面刷新；
  • react创建的是单页面应用，所以用路由跳转来模拟页面跳转，但我们肯定不希望每次路由跳转都会使我们的页面刷新，这样整个应用都会刷新了，所以我们不希望路由跳转的时候，页面刷新。
avatar
文章
阅读
粉丝