如何在 React js 中使用路由

在 React js 中使用路由可以让我们在单页面应用中实现页面切换和 URL 路由的功能，这是非常常见的需求。在本文中，我们将介绍如何使用 React Router 将路由添加到我们的 React 应用中。

准备工作

首先我们需要安装 React Router，可以使用 npm 来安装：

npm install react-router-dom

安装完成后，我们可以将其导入到我们的 React 组件中：

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

定义路由

定义路由的方式取决于你的项目需求，以下是一些常见的定义路由的方式：

基本路由

最简单的路由应该有一个主页面（或者叫做“根页面”），其他页面都是基于它来定义的。在这种情况下，我们只需要在主页面中定义路由就可以了：

function App() {
  return (
    <div>
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
    </div>
  );
}

以上代码中，exact属性表示只有在 URL 完全匹配时才会渲染此路由，即 / 和 /about 都不会匹配到 / 路由。

嵌套路由

当我们需要定义嵌套路由时，我们可以使用 Switch 和 Route 组件的嵌套：

function App() {
  return (
    <div>
      <Route exact path="/" component={HomePage} />
      <Route path="/products/:id" component={ProductPage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
      <Route path="/admin" component={AdminPage} />
      <Route path="/login" component={LoginPage} />

      <Switch>
        <Route path="/products" component={ProductsPage} />
      </Switch>
    </div>
  );
}

以上代码中，Switch 包裹的路由只会匹配一个，如果匹配到了一个路由，就不会再去匹配其它的路由了。这样，就可以实现基于 /products 的嵌套路由。

重定向

重定向路由是指当某个 URL 不匹配时，就自动跳转到另外一个 URL。在 React Router 中，可以使用 Redirect 组件来实现：

function App() {
  return (
    <div>
      <Route exact path="/" component={HomePage} />
      <Route path="/products/:id" component={ProductPage} />

      <Redirect from="/about" to="/about-us" />
      <Route path="/about-us" component={AboutPage} />

      <Route path="/contact" component={ContactPage} />
      <Route path="/admin" component={AdminPage} />
      <Route path="/login" component={LoginPage} />
    </div>
  );
}

以上代码中，我们使用了 Redirect 组件将 /about 重定向到了 /about-us。

使用路由

我们定义好路由后，就可以在组件中使用路由了。我们可以通过 URL 参数来控制路由，比如：

<Link to="/about-us">关于我们</Link>

以上代码中，我们使用 Link 组件将 URL 设置为 /about-us。

function ProductList() {
  const products = [
    { id: 1, name: '商品1' },
    { id: 2, name: '商品2' },
    { id: 3, name: '商品3' },
  ];

  return (
    <div>
      {products.map((product) => (
        <Link key={product.id} to={`/products/${product.id}`}>
          {product.name}
        </Link>
      ))}
    </div>
  );
}

以上代码中，我们根据商品的 ID 生成 URL 参数，然后使用 Link 组件将其包裹起来，生成一个可点击的链接。

总结

在本文中，我们介绍了如何在 React js 中使用路由，包括定义路由、嵌套路由、重定向和在组件中使用路由等内容。希望本文能对你理解 React Router 有所帮助。