"＜Routes＞无法渲染作为多个＜Route＞容器的组件。"

Question

当我将组件包裹在标签中时，出现了以下警告：

警告：[Categories] 不是一个组件。的所有子组件必须是或。

这是 App.js 文件的内容：

const App = () => {
   return (
        
            
            
            
                
                    {/* 这两个组件引发了警告 */}
                    
                          
                
            
        
    )
}

下面是 Categories.js 和 Details.js 文件：

// Categories.js
const Categories = () => {
  return (
    <>
        } />
        
        } />
        } />
        } />
        } />
    
  )
}

// Details.js
const Details = () => {
  return (
    <>
        } />
        } />
        } />
    
  )
}

如您所见，似乎不接受直接将 Categories 和 Details 作为其子元素。

我之所以这样设计，是因为我想将分别放在不同的文件夹/文件（即 Categories.js 和 Details.js）中进行管理。

那么，应该如何解决这个问题呢？

tvanfosson · Answer

错误信息是正确的。Categories 和 Details 并不是元素，它们是各自独立的组件。尽管它们在 JSX 内部包含了元素，但这并不意味着它们自身就是元素。

如果这是一个新项目，你可能考虑采用 React-Router 的较新构造方式——使用 createBrowserRouter()，在这种方法中，你可以将路由定义为数据（一个 JavaScript 对象数组），而不是作为 JSX 元素。这样一来，你就可以将 Categories 和 Details 也定义为数据，并在代码中的任何地方引用这些数据。

对于使用 React-Router 的人来说，推荐使用 createBrowserRouter() 方法来构建路由。

RavinderSingh13 · Answer

Routes 组件只能直接包含或作为有效的子组件。像这样，Categories 和 Details 都不能被 Routes 直接渲染。

可以将所有路由合并在一起进行渲染：

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

          
            } />
            } />
          

          
            } />
            } />
          

          
            } />
            } />
          
        
      
    
  );
};

这种组织方式使用了嵌套（或称为层级）路由。

如果你想通过代码分割来优化，可以根据逻辑将路由分为父级路由和子路由，其中组件负责渲染下级路由。为了让子路由正常工作，父级路由在其路径后添加一个通配符匹配符（即 splat，"*"），然后由路由指向的组件渲染另一个和一系列组件。

以下是 Movie、Tv 和 Person 的子路由组件示例：

const MovieRoutes = () => (
  
    } />
    } />
  
);

const TvRoutes = () => (
  
    } />
    } />
  
);

const PersonRoutes = () => (
  
    } />
    } />
  
);

最后在 App 组件中引用这些子路由组件，并添加通配符到父级路由路径中：

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

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