React Router Dom

React Router Dom 是一个用于 React 应用程序的路由库，它允许我们根据 URL 来展示不同的组件。使用 React Router Dom，我们可以将 URL 与特定的组件相绑定，同时实现页面之间的导航和状态的维护。

安装和导入

React Router Dom 可以通过 npm 安装：

npm install react-router-dom

在代码中导入它：

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

使用

首先需要定义路由，我们可以在 BrowserRouter 中添加 Route。在 Route 中，我们定义对应的 URL 和需要展示的组件。例如：

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

这里我们定义了三个路由 /, /about, /contact 和一个 404 页面。第一个路由使用 exact 表示只有当 URL 精确匹配 / 的时候才展示对应的组件。

除了 Route，还有许多组件，如 Link，用于创建导航链接，NavLink，用于创建带有类名的导航链接。例如：

<ul>
  <li>
    <NavLink to="/" exact activeClassName="active">
      Home
    </NavLink>
  </li>
  <li>
    <NavLink to="/about" activeClassName="active">
      About
    </NavLink>
  </li>
  <li>
    <NavLink to="/contact" activeClassName="active">
      Contact
    </NavLink>
  </li>
</ul>

这里我们定义了三个带有类名的导航链接。

动态路由

有时候我们需要定义动态 URL，例如 /users/:id，这里的 id 是动态的。我们可以使用 :id 来定义动态路由，例如：

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="/users/:id" component={User} />
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

其中 User 组件可以通过 this.props.match.params.id 来获取动态参数。

嵌套路由

有时候我们需要在一个组件中定义多个路由。例如，我们可以在 App 组件中定义 /dashboard 下的多个子路由。

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="/dashboard" component={Dashboard} />
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

其中 Dashboard 组件的代码可以是这样的：

<BrowserRouter>
  <div>
    <h2>Dashboard</h2>
    <ul>
      <li>
        <Link to="/dashboard/messages">Messages</Link>
      </li>
      <li>
        <Link to="/dashboard/settings">Settings</Link>
      </li>
    </ul>
    <Switch>
      <Route path="/dashboard/messages" component={Messages} />
      <Route path="/dashboard/settings" component={Settings} />
      <Route component={NotFound} />
    </Switch>
  </div>
</BrowserRouter>

其中 Messages 和 Settings 组件分别对应 /dashboard/messages 和 /dashboard/settings。

总结

React Router Dom 是一个非常强大的路由库，它可以帮助我们在 React 应用程序中实现页面之间的导航和状态的维护。通过学习本文中的内容，相信您已经对 React Router Dom 有了一定的了解。