18、React 中的路由实现

React 中的路由实现

在 React 应用开发中，路由是一个重要的组成部分，它能帮助我们根据不同的 URL 路径渲染相应的组件。本文将详细介绍如何在 React 中实现一个简单的路由系统。

1. 路径规范化工具 normalizeRoute

在处理路由时，我们需要确保父路由和子路由以正确的字符串形式创建，必要时包含斜杠。为此，我们创建了一个名为 normalizeRoute 的工具函数。

normalizeRoute(path, parent) {    
    if (path[0] === '/') {        
      return path;                
    }                             
    if (parent == null) {       
      return path;              
    }                           
    return `${parent.route}/${path}`;   
  }

这个函数接收两个参数： path 和可选的 parent 。其工作逻辑如下：
- 如果 path 以斜杠开头，直接返回 path 。
- 如果没有提供 parent ，直接返回 path