React Router提示路径/匹配的叶子路由无element报错如何解决？

你使用的是React Router v6版本，该版本对Route组件API做了不兼容更新，废弃了旧版本的component属性，要求使用element属性传入要渲染的JSX组件实例。你当前代码中为/路径的Route配置的是component={Home}，不符合v6语法要求，因此触发「叶子路由未设置element属性」的报错，默认渲染null导致页面空白。

按以下规则修改Route配置即可：

• 将Route标签的component属性替换为element属性
• element属性的值传入JSX格式的组件实例，即包裹为<Home />，而非直接传组件引用Home

修改后完整的App.js代码如下：

//App.js File
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
      </Routes>
    </Router>
  )
}

export default App;

后续新增其他路由配置时，全部统一使用element属性传入对应组件实例即可，无需再使用旧版的component/render属性。

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