小白也能懂！react-router-dom 超详细指南🚀

《react-router-dom 超详细指南》旨在帮助初学者快速掌握React Router DOM库的使用方法，该指南从基础概念入手，逐步介绍路由配置、动态路由、嵌套路由等核心概念，并辅以实例代码和详细注释，确保读者能够轻松理解并上手，还介绍了如何使用React Router进行状态管理和导航，以及如何处理404页面和权限控制等进阶话题，本指南是React Router DOM的权威指南，适合初学者和有一定经验的开发者参考。

小白也能懂！React Router Dom 超详细指南🚀

在现代的前端开发中,React 凭借其组件化、可复用、高效的特点，成为了构建单页面应用（SPA）的首选框架之一，而 react-router-dom 作为 React 官方提供的路由库，使得在 React 应用中实现页面跳转、组件渲染变得异常简单，本文将为你带来一份详尽的 react-router-dom 使用指南，确保即便是编程新手也能轻松上手。

安装与配置

你需要确保你的项目中已经安装了 react-router-dom，如果还没有安装，可以通过 npm 或 yarn 轻松添加：

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

我们需要在项目中配置 react-router-dom，这会在你的主应用组件（如 App.js）中进行：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import NotFoundPage from './pages/NotFoundPage';
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  );
}
export default App;

这里使用了 BrowserRouter 作为路由器，它提供了在浏览器环境中的路由功能。Switch 组件用于渲染第一个与当前位置匹配的 Route。exact 属性用于确保路径完全匹配，避免部分匹配问题。

创建路由组件

我们创建几个简单的页面组件作为路由的展示内容。HomePage.js、AboutPage.js 和 NotFoundPage.js：

HomePage.js

import React from 'react';
function HomePage() {
  return <h1>Welcome to the Home Page!</h1>;
}
export default HomePage;

AboutPage.js

import React from 'react';
function AboutPage() {
  return <h1>This is the About Page</h1>;
}
export default AboutPage;

NotFoundPage.js

import React from 'react';
function NotFoundPage() {
  return <h1>404 - Page Not Found</h1>;
}
export default NotFoundPage;

使用 Link 和 useNavigate 进行导航

在 React 组件中，你可以使用 Link 组件或 useNavigate 钩子来进行页面跳转。Link 类似于传统的 <a> 标签，但它是无状态的，不会刷新页面，而 useNavigate 则是一个函数，可以在函数组件中调用。

使用 Link：

import { Link } from 'react-router-dom';
function NavigationBar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

使用 useNavigate：

import { useNavigate } from 'react-router-dom';
import React from 'react';
function GoToAboutButton() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/about'); // 跳转到 About 页面
  }
  return <button onClick={handleClick}>Go to About</button>;
}

动态路由匹配与参数传递 🔍📜📋📁📂📃📄📅📆📇📈📉📊📋📌📍📏📐📑📒📓📔📕📖📗📘📙📚📛📜📝✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️✍️✏️✎️{/ 省略了部分符号 /}