使用 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 进行导航
• 完整代码