这是我参与「第四届青训营」笔记创作活动的的第8天

安装React-Router

推荐使用yarn安装最新版v6：

yarn add react-router-dom@6

如果使用npm的话，使用下面语句：

npm install react-router-dom@6

基础使用

我们先实现一个十分简单的demo，它有一个首页，首页有两个超链接，一个可以跳转到首页本身，另一个可以跳转到“关于”页面

先编写两个组件，一个用于首页，另一个用于关于页。

function Home () {
  return (
    <div>home</div>
  )
}

export default Home

function About () {
  return (
    <div>about</div>
  )
}

export default About

再编写``App.js`

// 引入两个组件
import Home from "./Home"
import Login from "./About"

// 进行路由配置
import { BrowserRoute, Link, Routes, Route } from "react-router-dom"

function App () {
  return (
    // 声明当前要用一个非hash模式的路由
    <BrowserRouter>
      {/* 指定跳转的组件 to用来配置路由地址 */}
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      {/* 路由出口 路由对应的组件会在这里进行渲染 */}
      <Routes>
        {/* 指定路径和组件的对应关系 path代表路径 element代表组件成对出现 path -> element */}
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

yarn start运行一下看看效果：

首页：

点击“关于”

API介绍

BrowerRouter

用来包裹其它需要路由的组件，所以通常会需要在你的应用的最外层用它。一个React应用只需要使用一次。

除了BrowserRouter，还有一种叫做HashRouter，它们的区别如下：

模式	实现方式	路由url表现
HashRouter	监听url hash值实现	http://localhost:3000/#/about
BrowerRouter	h5的 history.pushState API实现	http://localhost:3000/about

Link

用于指定导航链接，完成路由跳转，相当于HTML的<a>标签。语法如下：

<Link to="/">首页</Link>

其中to的参数表示路由地址，即要跳转的目标地址。

Routes & Route

Routes是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么React组件。语法如下：

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
</Routes>

当用户访问path对应的路径后，浏览器将会渲染element对应的组件。

总结

以上就是React-Router的简易入门，该库弥补了React原生不支持路由功能的遗憾，并且使用简单，容易上手。

React-Router简易入门