React-Router: 使用 Hooks 实现路由功能

React-Router 是一个用于 React 应用的路由库，它可以帮助我们在单页应用中实现路由功能。本文将介绍如何使用 React-Router Hooks 来实现路由功能，并结合实际项目中的项目架构进行讲解。

安装

使用 npm 安装 React-Router：

css复制
npm install react-router-dom --save

项目架构

我们假设正在开发一个在线购物网站，需要实现不同商品分类的展示和详情页的展示。我们的项目结构如下：

css复制
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   ├── Nav.js
│   │   └── ...
│   ├── pages/
│   │   ├── Home.js
│   │   ├── Category.js
│   │   ├── Product.js
│   │   └── ...
│   ├── App.js
│   └── index.js
└── package.json

使用 Hooks 实现路由功能

React-Router 提供了一系列的 Hooks，包括 useHistory、useLocation、useParams、useRouteMatch 等，我们可以使用这些 Hooks 来实现路由功能。下面我们将分别介绍这些 Hooks 的使用方法。

useHistory

useHistory Hook 可以让我们在组件中访问路由历史对象，从而实现编程式导航。

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

function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/category/1');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to Category 1</button>
    </div>
  );
}

在上面的例子中，我们通过 useHistory Hook 获取了路由历史对象 history，并在点击按钮时调用了 history.push('/category/1') 方法来跳转到 /category/1 路径。

useLocation

useLocation Hook 可以让我们在组件中访问当前路径和查询参数。

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

function Category() {
  const location = useLocation();
  const categoryId = location.pathname.split('/')[2];

  return (
    <div>
      <h1>Category {categoryId}</h1>
    </div>
  );
}

在上面的例子中，我们通过 useLocation Hook 获取了当前路径和查询参数，并通过 location.pathname.split('/')[2] 获取了 categoryId。

useParams

useParams Hook 可以让我们在组件中访问路径参数。

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

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

在上面的例子中，我们通过 useParams Hook 获取了路径参数 id。

useRouteMatch

useRouteMatch Hook 可以让我们在组件中访问当前路径和路由规则。

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

function Nav() {
  const match = useRouteMatch('/category/:id');

  return (
    <nav>
      <ul>
        <li className={match ? 'active' : ''}>
          <Link to="/">Home</Link>
        </li>
        <li className={match ? 'active' : ''}>
          <Link to="/category/1">Category 1</Link>
        </li>
        <li className={match ? 'active' : ''}>
          <Link to="/category/2">Category 2</Link>
        </li>
      </ul>
    </nav>
  );
}

在上面的例子中，我们通过 useRouteMatch('/category/:id') 获取了当前路径和路由规则，并根据匹配结果来设置 active 类名。

完整代码

import React from 'react';
import { BrowserRouter, Switch, Route, Link, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';
import Header from './components/Header';
import Nav from './components/Nav';
import Home from './pages/Home';
import Category from './pages/Category';
import Product from './pages/Product';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Nav />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/category/:id" component={Category} />
        <Route path="/product/:id" component={Product} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/category/1');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to Category 1</button>
    </div>
  );
}

function Category() {
  const location = useLocation();
  const categoryId = location.pathname.split('/')[2];

  return (
    <div>
      <h1>Category {categoryId}</h1>
    </div>
  );
}

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

function Nav() {
  const match = useRouteMatch('/category/:id');

  return (
    <nav>
      <ul>
        <li className={match ? 'active' : ''}>
          <Link to="/">Home</Link>
        </li>
        <li className={match ? 'active' : ''}>
          <Link to="/category/1">Category 1</Link>
        </li>
        <li className={match ? 'active' : ''}>
          <Link to="/category/2">Category 2</Link>
        </li>
      </ul>
    </nav>
  );
}

function Header() {
  return (
    <header>
      <h1>Online Shopping</h1>
    </header>
  );
}

以上就是使用 React-Router Hooks 来实现路由功能的完整代码。通过使用 Hooks，我们可以更加方便地实现路由功能，并且代码更加简洁易懂。