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

使用 React Router v6.22 进行导航

news 2025/9/13 7:44:38

使用 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;