掌握 React 中的动态路由：构建灵活且可扩展的应用程序

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《掌握 React 中的动态路由：构建灵活且可扩展的应用程序》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

React 动态路由详解

React 动态路由允许根据数据或用户交互动态调整路由，从而构建更灵活、更可扩展的应用。这对于无法预先定义所有路由的应用尤其重要，例如，页面内容依赖 API 数据，或路由取决于应用状态和操作的应用。

React 动态路由工作机制

React Router 是 React 应用中实现路由的首选库。它简化了动态路由的实现，允许路由路径和组件根据数据或条件变化。

核心概念

1. 动态路由参数: 使用动态占位符（例如 /user/:userId 中的 :userId）定义路由，这些占位符会在运行时被实际值替换。

2. 编程式导航: 使用 useNavigate 钩子或 组件，根据应用逻辑或操作动态跳转到不同路由。

3. 条件路由: 基于应用状态（例如用户登录状态或数据可用性）有条件地渲染路由。

4. 延迟加载路由: 按需加载路由，仅在需要时加载组件，提升应用性能。

React 动态路由示例

以下示例演示如何使用动态参数创建路由，并根据 URL 条件渲染组件。

分步示例：

1. 带参数的基本动态路由:

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

const UserProfile = () => {
  const { userId } = useParams();
  return 
用户资料：{userId}
;
};

const App = () => {
  return (
    
      
      
        } />
      
    
  );
};

export default App;

说明: UserProfile 组件使用 useParams 获取 URL 中的 userId 参数。点击链接会动态跳转到 /user/1 或 /user/2，并渲染对应用户资料。

2. 使用 useNavigate 钩子进行编程式路由:

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

const Home = () => {
  const navigate = useNavigate();

  const goToUserProfile = (id) => {
    navigate(`/user/${id}`);
  };

  return (
    

      
首页
       goToUserProfile(1)}>前往用户 1
       goToUserProfile(2)}>前往用户 2
    
  );
};

const UserProfile = ({ userId }) => {
  return 
用户资料：{userId}
;
};

const App = () => {
  return (
    
      
        } />
        } />
      
    
  );
};

export default App;

说明: Home 组件使用 useNavigate 在点击按钮时动态跳转到不同用户资料页面。UserProfile 组件使用 useParams 接收 userId 并渲染对应资料。

3. 条件动态路由:

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

const PrivateRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : ;
};

const Dashboard = () => 
仪表盘 - 仅限登录用户访问
;
const Login = () => 
登录页面
;

const App = () => {
  const isAuthenticated = false; // 修改此值进行测试

  return (
    
      
        } />
        } path="/dashboard" />
      
    
  );
};

export default App;

说明: PrivateRoute 组件是一个高阶组件，检查用户是否已登录。未登录用户会被重定向到登录页面。仪表盘路由仅在 isAuthenticated 为 true 时才可访问。

4. 延迟加载路由 (代码分割):

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

const Home = lazy(() => import('./Home'));
const Dashboard = lazy(() => import('./Dashboard'));

const App = () => {
  return (
    
      加载中...