使用BrowserRouter实现单页应用路由

BrowserRouter是React中一种路由方式，它是基于HTML5的historyAPI实现的。通过在前端实现路由，可以让用户在不刷新页面的情况下访问不同的URL，并执行不同的逻辑。

安装

使用NPM进行安装：

npm install react-router-dom

使用

在BrowserRouter中定义我们的路由规则，然后在页面中渲染出不同的组件。

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

// 定义不同的组件
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

const App = () => {
  return (
    // 使用BrowserRouter定义路由规则
    <Router>
      <div>
        {/* 在页面中添加导航链接 */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* 在页面中渲染出不同的组件 */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

跳转

使用<Link>组件实现导航链接跳转：

<Link to="/about">About</Link>

通过to属性指定跳转的路径。

也可以使用<Redirect>组件在程序中主动跳转：

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

<Redirect to="/login" />;

获取路由参数

可以通过useParams钩子函数获取路由中的参数：

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

const User = () => {
  let { id } = useParams();
  return <h1>User ID: {id}</h1>;
};

默认路由

当路由无法匹配时，可以添加默认路由：

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
  <Route path="*">
    <NoMatch />
  </Route>
</Switch>

在路由中添加一个path="*"的项，表示匹配所有其它路由。

总结

BrowserRouter是React中一种方便的路由实现方式，可以让我们在前端实现路由功能，方便用户在单页应用中访问不同的URL。通过定义路由规则和导航链接，在页面渲染出不同的组件。可以根据参数获取路由信息，也可以添加默认路由来处理无法匹配的路由情况。