如何在React Router（ES6）中通过Route在首页展示多组件？

在React Router v6中，<Routes>替代了旧版的<Switch>，同时<Route>的API有了核心变化：

• 不再支持exact属性（默认就是精确匹配）
• 移除了render和component属性，统一使用element传递要渲染的React元素

你需要修改代码如下：

return (
    <>
    <Navbar />
    <div className='container'>
    <Routes>   
      {/* 根路径同时渲染Search和Users组件 */}
      <Route path="/" element={
        <>
          <Search searchName={searchName} showClear={showClear} clearUsers={clearUsers} />
          <Users users={users} />
        </>
      } />

      <Route path='/about' element={<About />} />
      <Route path="/user/:anything" element={<UserDetail />} />
    </Routes>
    </div>
    </>
);
}
export default App;

关键修改点： #

• 替换render为element，直接传入包含两个组件的Fragment
• 原Component属性改为小写的element，并传入组件的JSX实例（<About />而非About）
• 移除exact，v6中Route默认精确匹配路径，根路径只会在URL完全为"/"时触发

内容的提问来源于stack exchange，提问作者jay