了解 React Router 基础知识：在 React 中管理导航

# Web 开发# JavaScript# React

React Router 基础

**React Router** 是一个功能强大的库，用于在 React 应用程序中进行路由。它允许开发人员在其应用程序中定义路由并管理不同视图或组件之间的导航。React Router 通过处理动态路由和基于 URL 的导航，可以轻松创建单页应用程序 (SPA)。

React Router 的关键概念

  • 路由：它是指在应用程序内从一个 URL 导航到另一个 URL 的过程。
  • SPA（单页应用程序）：React Router 是为 SPA 设计的，其中应用程序只需加载一次，当用户导航到不同路由时，只会更新页面的部分内容。

    • React Router 的核心组件

  • BrowserRouter（或 HashRouter）：此组件是保存路由逻辑的包装器，用于启用导航。BrowserRouter 使用 HTML5 历史记录 API 来操作浏览器的 URL 并使 UI 保持同步。对于较旧的浏览器或不支持 HTML5 历史记录 API 的情况，可以使用 HashRouter（尽管它使用基于哈希的路由）。

    • **例子**：

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

   const App = () => {
     return (
       
         
       
     );
   };
  • 路线：组件用于定义应用程序中的所有路由。它充当各个 Route 元素的容器。在 React Router v6 中，Routes 取代了之前的 Switch 组件。

    • **例子**：

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

   const Routes = () => {
     return (
       
         } />
         } />
       
     );
   };
  • 路线：component 定义 URL 路径和组件之间的映射。path 属性定义 URL，element 属性指定路由匹配时应渲染的组件。

    • **例子**：

    } />
  • Link：该组件用于在不重新加载页面的情况下在不同路由之间导航。它会呈现一个锚点 ( ) 标签，该标签会对点击事件做出反应并相应地更新浏览器的 URL。

    • **例子**：

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

   const Navigation = () => {
     return (
       
     );
   };
  • useNavigate：useNavigate 钩子用于以编程方式导航到不同的路由。此钩子通常在事件处理程序或副作用中使用。

    • **例子**：

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

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

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       
     );
   };

    基本路由示例

    这是一个在功能性 React 应用程序中演示 React Router 的基本示例：

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

const Home = () => 
    Home Page
    ;
const About = () => 
    About Page
    ;
const Contact = () => 
    Contact Page
    ;

const App = () => {
  return (
    
      
    
        

        
          } />
          } />
          } />
        
      
    
        
  );
};

export default App;

    解释：

  • BrowserRouter 组件包装整个应用程序以实现路由。
  • Link 组件用于创建不会触发页面重新加载的导航链接。
  • Routes 组件包含所有路由，每个 Route 元素将 URL 路径映射到某个组件（例如，Home、About 或 Contact）。
  • 点击链接将更新 URL 并呈现相应的组件。

    • 嵌套路由

    React Router 还支持**嵌套路由**，允许您在其他路由中定义路由。

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

const Home = () => 
    Home Page
    ;

const Dashboard = () => (
  
    
    
    Dashboard
    
    

    
      Profile Page} />
      Settings Page} />
    
  
    
);

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

export default App;

    解释：

  • /dashboard 路由有嵌套路由：/dashboard/profile 和 /dashboard/settings。
  • 通过在父路由中使用 * 通配符（path="dashboard/*"），React Router 知道在 Dashboard 组件内呈现子路由。

    • 使用 Navigate 重定向

    您可以使用“Navigate”组件或“useNavigate”钩子以编程方式将用户导航至不同的路线。

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

// Redirect to a different route
const Redirect = () => ;

    解释：

  • 呈现时，Navigate 组件将自动将用户重定向到 /about 路线。

    • 路线参数

    您可以通过包含路由参数来定义动态路由，这些路由参数可用于在 URL 中传递值。

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

const UserProfile = () => {
  const { userId } = useParams();
  return 
    User Profile for user: {userId}
    ;
};

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

export default App;

    解释：

  • 路由路径中的:userId 是路由参数。
  • userProfile 组件内部使用 useParams 钩子从 URL 中提取 userId 的值并将其呈现在页面上。

    • 结论

    React Router 使在 React 应用程序中的视图之间导航变得轻松高效。借助其组件（如“BrowserRouter”、“Route”、“Link”）和钩子（如“useNavigate”），您可以创建具有复杂路由逻辑的动态单页应用程序。通过了解 React Router 的基础知识（包括处理路由、嵌套路由和路由参数），您可以轻松管理 React 应用程序中的导航。