React Router报Homepage非Route组件错误 页面空白黑屏排查

Uncaught Error: [Homepage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

这个报错是React Router v6的语法校验不通过导致的，<Routes>标签仅接受<Route>或<React.Fragment>作为直接子元素，且<Route>的渲染组件必须通过element属性传入，你的App.js中路由写法混用了v5旧语法，不符合v6规范。
具体错误点：

• 根路由的element属性直接传入了Homepage组件函数本身，element要求传入JSX元素，也就是标签形式的<Homepage />，同时v6版本路由默认就是精确匹配，不需要额外写exact属性
• 其余所有路由都把要渲染的页面组件直接写在了<Route>标签的子节点位置，这是React Router v5的已废弃写法，v6不支持这种写法，所有路由匹配后要渲染的内容都必须放在element属性中

你的HomePage.jsx、index.jsx代码逻辑没有问题，只需要把App.js的路由部分按v6规范重写即可，修正后的完整App.js代码如下：

import React from 'react';
import Single from "./pages/single/Single";
import Write from "./pages/write/Write";
import Settings from "./pages/settings/Settings";
import Topbar from "./components/topbar/Topbar";
import Homepage from "./pages/homepage/Homepage";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import {  Routes, Route } from "react-router-dom";

function App() {
  const currentUser = true;
  return (
    <>
      <Topbar />
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/posts" element={<Homepage />} />
        <Route path="/register" element={currentUser ? <Homepage /> : <Register />} />
        <Route path="/login" element={currentUser ? <Homepage /> : <Login />} />
        <Route path="/post/:id" element={<Single />} />
        <Route path="/write" element={currentUser ? <Write /> : <Login />} />
        <Route path="/settings" element={currentUser ? <Settings /> : <Login />} />
      </Routes>
    </>
  );
}
export default App;

替换代码后刷新页面，路由即可正常渲染，页面黑屏、控制台报错问题会直接解决。

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