React Router v6根路由无element报错及render兼容问题求解

React Router v6 版本已移除旧版<Route>组件支持的render、component属性，所有路由的渲染内容必须通过element属性传入。
你写的根路径/路由沿用了v5版本的render写法，v6无法识别该配置，会判定这个叶子路由未配置渲染内容，因此抛出「路径"/"匹配到的叶子路由未配置element属性」警告，默认渲染值为null的<Outlet />，最终导致页面空白、addTodo和todos组件无法加载。
额外注意：v6版本路由默认是精确匹配规则，不需要额外添加exact属性。

直接把根路由的render写法替换为element属性传值，把需要渲染的JSX节点直接传入即可，修正后的返回代码如下：

return (
  <>
    <Router>
      <Header title="To Do List" />
      <Routes>
        <Route 
          path="/" 
          element={
            <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={todos} onDelete={onDelete} />
            </>
          }
        />
        <Route path="/about" element={<About />} />
      </Routes>
      <Footer />
    </Router>
  </>
);

如果需要在路由渲染时加权限判断、参数处理等逻辑，直接在element对应的JSX位置写逻辑即可，无需用旧版的render函数包裹，示例：

<Route 
  path="/" 
  element={
    userLoggedIn ? (
      <>
        <AddTodo addTodo={addTodo} />
        <Todos todos={todos} onDelete={onDelete} />
      </>
    ) : <Navigate to="/login" replace />
  }
/>

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