当前位置：首页 > React

react路由实现切换

2026-01-27 01:15:51React

React 路由实现切换的方法

在 React 中实现路由切换通常使用 react-router-dom 库，以下是常见的实现方式：

安装依赖

确保项目已安装 react-router-dom：

npm install react-router-dom

基本路由配置

使用 BrowserRouter 包裹应用，并定义路由规则：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

路由跳转方式

1. 使用 <Link> 组件

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

2. 编程式导航 通过 useNavigate Hook 实现：

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

function Button() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/about')}>
      Go to About
    </button>
  );
}

动态路由与参数传递

定义动态路由：

<Route path="/user/:id" element={<UserPage />} />

获取路由参数：

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

function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

嵌套路由实现

通过 <Outlet> 组件实现嵌套布局：

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

在布局组件中渲染子路由：

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet />
    </div>
  );
}

路由守卫（权限控制）

通过高阶组件或自定义逻辑实现：

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />

404 页面处理

添加通配符路由匹配未定义的路径：

react路由实现切换

<Route path="*" element={<NotFoundPage />} />

以上方法覆盖了 React 路由切换的主要场景，可根据实际需求组合使用。

标签: 路由 react

分享给朋友：

vue路由实现iframe

在Vue中实现iframe嵌入可以通过路由配置和组件动态加载来完成。以下是具体实现方法：路由配置在Vue Router的路由配置中，通过component属性动态加载iframe组件。需要将目标…

react 如何运行

运行 React 项目的步骤安装 Node.js 确保系统已安装 Node.js（建议版本 16+），可通过官网下载并安装。安装后验证版本： node -v npm -v 创建 React 项目…

vue实现户籍系统路由实现

Vue 实现户籍系统路由方案户籍系统通常涉及多层级页面和权限控制，以下是基于 Vue Router 的实现方案：路由模块配置在 src/router/index.js 中定义路由结构： co…

如何清洁react

清洁 React 项目的方法删除未使用的依赖项运行 npm ls 或 yarn list 检查已安装的依赖项，使用 npm uninstall <package> 或 yarn rem…

react路由如何配置

React 路由配置方法安装 React Router 使用 npm 或 yarn 安装 React Router 的 DOM 版本： npm install react-router-dom #…

react elementUI

React 和 Element UI 是两个不同的技术栈，但可以通过整合实现类似功能。以下是相关解决方案和替代方案： React 与 Element UI 的替代方案 Element UI 是为 V…

react路由实现切换