使用 React Router v6.22 进行导航

使用 React Router v6.22 进行导航

React Router v6.22 是 React 应用程序中最常用的路由库之一，提供了强大的导航功能。本文将介绍如何在 React 应用程序中使用 React Router v6.22 进行导航。

安装 React Router

首先，我们需要安装 React Router v6.22。可以使用 npm 或 yarn 进行安装：

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

路由设置

在使用 React Router 进行导航之前，我们需要设置路由。通常，我们将路由放在单独的文件中，并使用 Route 组件来定义路径和相应的组件。例如：

// About.jsx
import React from 'react';

function About() {
  return <h2>About Page</h2>;
}

export default About;

// Home.jsx
import React from 'react';

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

创建导航

在 React Router v6 中，我们可以使用 NavLink 组件创建链接，并使用 Routes 和 Route 组件定义路由。例如：

import React from 'react';
import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom';
import About from './About';
import Home from './Home';

function App() {
  return (
    <BrowserRouter>
      <div className="row">
        <ul className="nav nav-pills">
          <li className="nav-item">
            <NavLink className="nav-link" to="/about">About</NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to="/home">Home</NavLink>
          </li>
        </ul>
      </div>
      <div className="panel">
        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/home" element={<Home />} />
          <Route path="/" element={<Navigate to="/about" />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

使用 Navigate 组件

React Router v6 中引入了 Navigate 组件，用于在组件中进行编程式导航。可以在 Route 组件中使用 Navigate 来进行重定向。

总结

通过以上步骤，我们可以在 React 应用程序中使用 React Router v6.22 进行导航。这使得在应用程序中管理页面和路由变得非常简单和灵活。

参考

• 使用 React Router v6.22 进行导航
• 完整代码