React 路由

在 React 应用中，路由是一种用来管理应用内部不同页面切换的技术。它允许我们通过 URL 的变化来动态地展示不同的组件，而无需重新加载整个页面。本章将详细介绍如何使用 React Router 来构建和管理复杂的单页应用。

安装 React Router

首先，我们需要安装 react-router-dom 包，这是 React 生态系统中最常用的路由库之一。你可以通过 npm 或 yarn 来安装：

npm install react-router-dom
# 或者
yarn add react-router-dom

基本路由配置

接下来，让我们来看一下基本的路由配置。我们将在应用中使用 <BrowserRouter> 组件来包裹整个应用，并使用 <Route> 组件来定义路由规则。

// www.javascriptcn.com code example
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

上述代码展示了如何设置两个简单的路由：主页和关于页面。当用户访问根路径时，会显示 Home 组件；当访问 /about 时，会显示 About 组件。如果访问的路径没有匹配任何路由，则会显示 NotFound 组件。

动态路由和参数

有时候，我们需要根据 URL 中的某些参数来动态显示内容。这时可以使用带有参数的路由。例如，如果我们有一个博客应用，每个文章都有一个唯一的 ID，我们可以这样设置路由：

<Route path="/posts/:postId" component={PostDetail} />

然后在组件中，可以通过 useParams 钩子来获取这些参数：

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

function PostDetail() {
  let { postId } = useParams();
  // 使用 postId 获取对应的文章数据并渲染
}

嵌套路由

嵌套路由是指在一个路由内部嵌套另一个路由。这在需要在一个主页面中展示多个子页面时非常有用。例如，我们可以为用户设置一个个人中心页面，并在此页面下添加多个子页面如个人信息、订单信息等。

<Route path="/profile">
  <ProfilePage />
</Route>

在 ProfilePage 组件中，我们可以继续定义子路由：

// www.javascriptcn.com code example
function ProfilePage() {
  return (
    <div>
      <h1>个人中心</h1>
      <Switch>
        <Route path="/profile/info" component={UserInfo} />
        <Route path="/profile/orders" component={OrderInfo} />
      </Switch>
    </div>
  );
}

这样，当我们访问 /profile/info 和 /profile/orders 时，就会分别显示 UserInfo 和 OrderInfo 组件的内容。

使用 Link 进行导航

为了方便用户在不同页面之间进行导航，我们可以使用 <Link> 组件代替传统的 <a> 标签。<Link> 组件不仅提供了更好的用户体验，还可以避免页面刷新，从而实现平滑的过渡效果。

// www.javascriptcn.com code example
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="/profile/info">个人信息</Link></li>
      </ul>
    </nav>
  );
}

通过以上介绍，你应该对如何使用 React Router 构建复杂的单页应用有了一个基本的认识。下一节我们将探讨更高级的主题，如路由守卫、懒加载等。