React Router v5：基础组件解密

2023-09-29 21:10:09

导言

React Router 是一个强大的路由库，用于构建单页面应用程序 (SPA)，它使应用程序能够响应用户导航而不重新加载页面。React Router v5 是最新版本，带来了许多新特性和改进。本文将深入探讨 React Router v5 中的基础组件，包括路由组件、路由匹配组件和导航组件。

路由组件

路由组件是 React Router 的核心，负责渲染用户界面 (UI) 中与当前 URL 相对应的部分。React-router-dom 库提供了两个路由组件：

<Route>：它用于定义特定路径对应的 UI。
<Switch>：它是一个容器组件，其中只能渲染一个 <Route>。

通过组合这些组件，您可以创建复杂的路由结构，其中不同的 UI 元素对应于不同的 URL。例如：

import { Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
};

在这个示例中，<App> 组件包含一个 <Switch> 组件，其中包含三个 <Route> 组件。当用户导航到根路径（/）时，<Home> 组件将被渲染。当用户导航到 /about 路径时，<About> 组件将被渲染，依此类推。

路由匹配组件

路由匹配组件用于确定哪个 <Route> 组件与当前 URL 匹配。React-router-dom 提供了两个路由匹配组件：

<Match>：它用于判断当前 URL 是否与特定路径匹配。
<Link>：它用于创建导航到特定 URL 的链接。

路由匹配组件允许您动态渲染 UI，具体取决于当前 URL。例如，您可以使用 <Match> 组件来显示不同的侧边栏菜单项，具体取决于用户当前浏览的页面：

import { Match } from "react-router-dom";

const Sidebar = () => {
  return (
    <ul>
      <li>
        <Match path="/">
          {({ match }) => (
            <Link to="/">Home</Link>
          )}
        </Match>
      </li>
      <li>
        <Match path="/about">
          {({ match }) => (
            <Link to="/about">About</Link>
          )}
        </Match>
      </li>
      <li>
        <Match path="/contact">
          {({ match }) => (
            <Link to="/contact">Contact</Link>
          )}
        </Match>
      </li>
    </ul>
  );
};

导航组件

导航组件用于在应用程序中实现导航。React-router-dom 提供了三个导航组件：

<BrowserRouter>：它用于创建一个基于浏览器的路由系统。
<HashRouter>：它用于创建一个基于哈希的路由系统。
<NavLink>：它用于创建导航到特定 URL 的链接，并具有活动样式。

导航组件使您可以轻松地在应用程序中创建导航菜单和链接。例如，您可以使用 <NavLink> 组件来创建导航到不同页面的选项卡式菜单：

import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </nav>
  );
};