当前位置：首页 > article >正文

什么是 React Router？如何使用它？

article 2025/3/28 10:29:25

React Router 是一个用于在 React 应用程序中实现路由的库。它使得开发者可以在单页应用（SPA）中创建多个视图，并在不同的 URL 之间进行导航。通过 React Router，开发者能够处理 URL 的变化，渲染不同的组件，管理历史记录，并实现动态路由。

React Router 的主要特点

组件化：React Router 采用组件化的设计，将路由配置与 UI 组件结合在一起。
嵌套路由：支持嵌套路由，可以创建复杂的路由结构。
动态路由：可以根据应用状态动态生成路由。
路由守卫：可以实现访问控制，确保用户在特定条件下才能访问某些路由。
历史管理：自动管理浏览历史，支持前进和后退操作。

安装 React Router

在项目中使用 React Router，首先需要安装它。可以使用 npm 或 yarn 进行安装：

npm install react-router-dom

或者

yarn add react-router-dom

使用 React Router

1. 基本用法

首先，在应用的入口文件中，通常是 index.js 或 App.js，导入 BrowserRouter 并包裹整个应用：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

接下来，在 App.js 中定义路由：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;

在上面的代码中：

Switch 组件用于确保只渲染一个匹配的 Route。
Route 组件用于定义路径和对应的组件。
exact 属性确保只有在路径完全匹配时才会渲染该路由。

2. 路由参数

React Router 支持路由参数，可以在 URL 中使用动态部分：

<Route path="/user/:id" component={UserProfile} />

在 UserProfile 组件中，可以通过 props.match.params 访问参数：

const UserProfile = ({ match }) => {
  return <h1>User ID: {match.params.id}</h1>;
};

3. 嵌套路由

可以在一个路由组件中定义嵌套路由：

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    <Route path="/dashboard/stats" component={Stats} />
    <Route path="/dashboard/reports" component={Reports} />
  </div>
);

<Route path="/dashboard" component={Dashboard} />

4. 使用 Link 组件进行导航

使用 Link 组件来创建导航链接：

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

const Navbar = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/dashboard">Dashboard</Link>
  </nav>
);

5. 编程式导航

可以使用 useHistory 钩子进行编程式导航：

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

const Login = () => {
  const history = useHistory();

  const handleLogin = () => {
    // 登录逻辑
    history.push('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
};

6. 路由守卫

可以在路由中添加访问控制逻辑，例如保护某些路由不被未授权用户访问：

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* 你的认证逻辑 */;

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 使用 PrivateRoute
<PrivateRoute path="/dashboard" component={Dashboard} />

7. 路由重定向

可以使用 Redirect 组件实现重定向：

<Route path="/old-path">
  <Redirect to="/new-path" />
</Route>

8. 使用 Hooks

React Router 提供了一些 Hooks 以简化路由的使用：

useLocation：获取当前的 location 对象。
useParams：获取路由参数。
useRouteMatch：获取当前路由的匹配信息。

示例：

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

const UserProfile = () => {
  const { id } = useParams();
  const location = useLocation();

  return (
    <div>
      <h1>User ID: {id}</h1>
      <p>Current URL: {location.pathname}</p>
    </div>
  );
};