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

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

const Navigation = () => {
  return (
    
  );
};

5. useNavigate:
   • 钩子函数，用于以编程方式导航到不同的路由。通常用于事件处理程序或副作用中。

示例:

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

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

  const handleLogin = () => {
    // 登录逻辑
    navigate('/dashboard');
  };

  return 登录;
};

基本路由示例

一个在函数式 React 应用中演示 React Router 基本用法的示例：

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

const Home = () => 
主页
;
const About = () => 
关于页
;
const Contact = () => 
联系页
;

const App = () => {
  return (
    
      

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

export default App;

说明:

• BrowserRouter 组件包裹整个应用以启用路由。
• Link 组件创建不会触发页面重新加载的导航链接。
• Routes 组件包含所有路由，每个 Route 元素将 URL 路径映射到组件 (例如，Home、About 或 Contact)。
• 点击链接会更新 URL 并渲染相应的组件。

嵌套路由

React Router 也支持嵌套路由，允许在其他路由内定义路由。

// ... (省略部分代码，与上一个示例类似)

const Dashboard = () => (
  

    
仪表盘
    
    
      个人资料页面} />
      设置页面} />
    
  
);

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

// ... (省略部分代码)

说明:

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

使用 useNavigate 重定向

可以使用 useNavigate 钩子以编程方式将用户重定向到不同的路由。

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

const RedirectComponent = () => {
  const navigate = useNavigate();
  // 将用户重定向到另一个路由
  navigate('/about');
  return null; // 返回 null 避免渲染任何内容
};

说明:

• RedirectComponent 组件渲染时会自动将用户重定向到 /about 路由。

路由参数

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

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

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

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

export default App;

说明:

• 路由路径中的 :userId 是一个路由参数。
• useParams 钩子在 UserProfile 组件内部使用，从 URL 中提取 userId 的值并在页面上显示。

总结

React Router 简化了 React 应用中视图间导航，提高了效率。BrowserRouter、Route、Link 等组件以及 useNavigate 等钩子，可以创建具有复杂路由逻辑的动态单页应用。掌握 React Router 基础知识，包括路由处理、嵌套路由和路由参数，可以轻松管理 React 应用的导航。

以上就是《了解 React Router 基础知识：在 React 中管理导航》的详细内容，更多关于的资料请关注golang学习网公众号！