React 路由指南

React 路由是一个基于 React 的声明式路由库，它使得构建单页应用（SPA）变得非常简单。

路由基本概念

• 路由器（Router）: 负责根据不同的 URL 匹配不同的组件。
• 组件（Component）: 路由匹配到的组件，负责渲染内容。
• 路由路径（Path）: 用户在浏览器地址栏输入的 URL。

使用 React Router

以下是一个简单的例子，展示如何使用 React Router：

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

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

export default App;

在上面的代码中，我们定义了一个路由器（Router），然后通过 Switch 组件来匹配不同的路由路径（Path）。对于每个匹配到的路径，我们定义了一个组件（Component）来渲染内容。

路由链接

使用 React Router，我们可以通过 <Link> 组件来创建路由链接，如下所示：

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

在上面的代码中，我们使用了 <Link> 组件来创建导航链接。当用户点击链接时，页面不会刷新，而是通过 React Router 实现了无刷新跳转。

路由传参

React Router 支持通过路径参数来传递数据，以下是一个例子：

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

function UserProfile() {
  let { userId } = useParams();
  return <h1>User ID: {userId}</h1>;
}

在上面的代码中，我们使用 useParams 钩子获取到路径参数 userId，并在组件中渲染出来。

总结

React Router 是一个强大的路由库，它可以帮助我们构建功能丰富的单页应用。希望这个指南能帮助你更好地了解 React 路由。

React Router