React 路由：初学者的简易指南

React 路由 (React Router) 是一个用来管理客户端应用中页面间导航的库。有了它，开发者可以简单、灵活地实现用户在不同页面之间的切换，提供了一个健壮的导航系统，使得页面的加载和状态管理更加高效。React Router 支持不同的路由模式，包括浏览器的原生（hash）模式和历史模式，这使得应用在不同环境下都能提供一致的用户体验。

安装与配置

要开始使用 React Router，我们首先需要安装它：

npm install react-router-dom

接下来，配置 React Router 以支持路由功能。在项目的入口文件（通常是 index.js 或 index.jsx）中，添加以下代码：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

这段代码中，我们使用了 BrowserRouter 组件作为根组件，它负责处理浏览器历史的推和弹操作。Switch 组件确保只有一个匹配的 Route 组件被渲染，而 Route 组件定义了路径和组件的映射关系。

基本路由示例

现在，我们来创建对应于路由的组件：

Home组件

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to Home</h1>
      <p>This is the default page.</p>
    </div>
  );
}

export default Home;

About组件

import React from 'react';

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company.</p>
    </div>
  );
}

export default About;

Contact组件

import React from 'react';

function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>How to reach us.</p>
    </div>
  );
}

export default Contact;

在上述组件中，我们创建了三个简单的页面：Home、About 和 Contact。在 App 组件中，我们定义了这些页面的路由映射关系，并在浏览器中访问这些路径时，相应的组件将被渲染。

嵌套路由

React Router 支持嵌套路由，这对于构建具有复杂层次结构的页面特别有用。例如，我们有一个需要多个子页面组成的“Users”页面：

Users组件

import React, { useState } from 'react';
import '../../App.css'; // 假设有一个全局的样式文件

function Users() {
  const [users, setUsers] = useState([]);

  async function fetchData() {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    setUsers(data);
  }

  React.useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="users">
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

UserDetail组件

import React from 'react';

function UserDetail({ id }) {
  async function fetchData() {
    const response = await fetch(`https://api.example.com/users/${id}`);
    const data = await response.json();
    return data;
  }

  return (
    <div className="user-detail">
      <h2>User Detail</h2>
      <p>ID: {id}</p>
      {/* 其他用户详情内容 */}
    </div>
  );
}

export default UserDetail;

在 Users 组件中，我们通过嵌套的 Route 来渲染 UserDetail 组件，其中 path 属性包括了用户ID作为参数：

<Route
  path="/users/:userId"
  render={(props) => <UserDetail {...props} />}
/>

在这个例子中，:userId 是一个动态参数，可以接收从URL中传递的任何值。当用户访问 /users/123 时，对应的 UserDetail 组件将被渲染。

路由参数与查询字符串

在某些情况下，我们需要在URL中传递参数，以便于动态加载和展示内容。例如，在用户点击某个用户ID的链接时，我们可能希望加载该用户的所有数据。

更新 Users 组件的 Route 使用动态参数

将 Route 组件的 path 属性修改为包含用户ID作为动态参数：

<Route
  path="/users/:userId"
  render={(props) => <UserDetail {...props} />}
/>

UserDetail 组件的 URL 参数接收与渲染

在 UserDetail 组件中，通过 props.match.params.userId 来获取URL中的用户ID参数：

function UserDetail({ match }) {
  const userId = match.params.userId;

  // 在这里用userId获取用户数据
  // ...

  return (
    <div className="user-detail">
      <h2>User Detail</h2>
      <p>ID: {userId}</p>
      {/* 其他用户详情内容 */}
    </div>
  );
}

export default UserDetail;

结论

通过本指南，你已经了解了如何使用 React Router 在 React 应用中添加基本的页面导航、实现嵌套路由、处理动态参数以及处理错误。React Router 提供了强大的功能，帮助你构建具有复杂导航结构的应用，同时保持代码的可读性和可维护性。通过实践上述示例，相信你已经掌握了 React Router 的基本用法，可以开始在自己的项目中应用这些技巧了。