React Router Dom V6 使用详解

2020-03-15 language web

现在的网页，不同于之前的全页面刷新，一般会采用局部刷新，用户不会感知，看起来实际上只有一个页面，所以也被称为 “单页应用” (Single Page Appliaction) 。

简介

React-Router 提供了两个组件来完成路由功能，包括了 Router 整个应用只需要一个实例，保存了路由表；另一个是 Route 代表着一个 URL 的路由规则。

可以直接通过 npm install --save react-router-dom 命令安装。

示例

这里直接通过 create-react-app 脚手架安装，先通过 npm install -g create-react-app 命令安装。

create-react-app foobar

然后直接修改 src/App.js 文件。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Routes,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={ <Home /> } />
          <Route path="/about" element={ <About /> } />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

这里使用的是 BrowserRouter 也可以替换为 HashRouter ，此时，URL 的路由前会添加一个 /#/ 。

另外，也可以使用 component 参数，其用途就是返回一个虚拟的 DOM ，例如，上述路由可以修改为如下。

<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/about" component={About} />
</Switch>

也可以直接构建虚拟 DOM 。

<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/about" component={About} />
  <Route exact path="/dashboard" component={()=><div>Hello DashBoard</div>} />
  <Route component={()=><div>404 Page!!!</div>} />
</Switch>

最后一个类似于 switch 语句中的 default 。

参考