React Router 快速入门

React Router 是 React 应用程序中用于页面导航的库。它允许你为应用程序的不同视图定义路由，并且可以轻松地处理导航和URL更新。

安装 React Router

首先，确保你已经安装了 React 和 Create React App。然后，可以通过以下命令安装 React Router：

npm install react-router-dom

创建路由

在 React 组件中，你可以使用 <Route> 组件来定义路由。以下是一个简单的例子：

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

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

在这个例子中，我们定义了三个路由：主页、关于页面和联系页面。<Switch> 组件确保只有第一个匹配的路由被渲染。

使用链接

要导航到不同的路由，你可以使用 <Link> 组件。以下是如何在应用程序中添加导航链接：

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">主页</Link>
        </li>
        <li>
          <Link to="/about">关于</Link>
        </li>
        <li>
          <Link to="/contact">联系</Link>
        </li>
      </ul>
    </nav>
  );
}

动态路由参数

React Router 允许你使用动态路由参数。例如，如果你有一个用户列表页面，你可以这样定义路由：

<Route path="/users/:id" component={User} />

在这个例子中，:id 是一个动态参数，它会在 URL 中作为路径的一部分传递。

路由组件

你可以创建专门的路由组件来处理特定的路由。例如，你可以创建一个 User 组件来显示用户信息：

function User({ match }) {
  return (
    <div>
      <h2>用户信息</h2>
      <p>用户ID: {match.params.id}</p>
    </div>
  );
}

图片示例

以下是一个关于 React Router 的图片示例：

更多关于 React Router 的信息