了解 React Router v 功能、设置和最佳实践

Home.js

import React from 'react';

const Home = () => {
  return 
主页
;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return 
关于我们
;
};

export default About;

NotFound.js

import React from 'react';

const NotFound = () => {
  return 
页面未找到
;
};

export default NotFound;

React Router v6 动态路由

为了处理动态路由，例如URL中包含用户ID的用户信息页面，React Router v6提供useParams Hook。

步骤一：定义动态路由

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

const UserProfile = () => {
  const { userId } = useParams(); // 从URL中提取userId

  return 
用户ID：{userId} 的用户信息
;
};

const App = () => {
  return (
    
      } path="/user/:userId" />
    
  );
};

export default App;

说明：

• :userId 是路由路径中的动态片段。useParams Hook允许您访问UserProfile组件中的userId值。
• 当您导航到/user/123时，UserProfile组件将渲染并显示userId为123。

React Router v6 嵌套路由

嵌套路由允许您在父路由中定义子路由，构建复杂的布局。

步骤一：定义父子路由

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

const Dashboard = () => {
  return (
    

      
仪表盘
      
        } path="overview" />
        } path="settings" />
      
    
  );
};

const Overview = () => 
概览页面
;
const Settings = () => 
设置页面
;

const App = () => {
  return (
    
      } path="/dashboard/*" />
    
  );
};

export default App;

说明：

• Dashboard组件包含用于概览和设置的嵌套路由。
• 父路由中的/*确保所有子路由都在/dashboard下处理。

React Router v6 Hooks

React Router v6引入了几个Hook用于导航和访问路由信息：

1. useNavigate: 以编程方式导航到不同的路由。
2. useParams: 访问动态URL参数。
3. useLocation: 获取关于当前位置（URL）的信息。
4. useMatch: 将当前URL与给定路由匹配。
5. useResolvedPath: 将路径解析为绝对URL。

示例：使用useNavigate Hook

useNavigate Hook允许在应用中进行编程导航。

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

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

  const goToAboutPage = () => {
    navigate('/about'); // 以编程方式导航到关于页面
  };

  return (
    

      跳转到关于页面
    
  );
};

export default RedirectToAbout;

React Router v6 最佳实践

• 默认精确匹配: React Router v6默认精确匹配路由，无需exact属性，简化路由匹配。
• 使用element属性: 将JSX直接传递给element属性，而非component属性，简化代码，减少对渲染函数的需求。
• 嵌套路由: 使用嵌套路由构建复杂的页面布局，保持代码模块化和可维护性。
• 使用通配符路由处理404: 使用通配符*捕获所有不匹配的路由并显示404页面或将用户重定向到默认路由。

总结

React Router v6相比前版有诸多改进，包括更简单的API、更好的路由匹配以及对动态和嵌套路由的增强支持。通过利用useNavigate、useParams和useLocation等Hook，您可以在React应用中构建强大且灵活的路由系统。

本篇关于《了解 React Router v 功能、设置和最佳实践》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！