React Router路由警告：/homepage路由无元素致空白页排查

问题现象 #

访问http://localhost:3002/homepage时页面空白，控制台出现如下警告：

utils.ts:900 Matched leaf route at location "/homepage" does not have an element. This means it will render an

return (<Outlet />)

with a null value by default resulting in an "empty" page.

相关代码 #

App.js #

import { Route, Routes } from "react-router-dom";
import io from "socket.io-client";
import { useEffect } from "react";
import Login from "./components/login";
import Homepage from "./components/homepage";

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/homepage" component={<Homepage />} />
      </Routes>
    </div>
  );
};

export default App;

homepage.js #

import React from "react";

const Homepage = () => {
  return <h1>Homepage</h1>;
};

export default Homepage;

问题原因 #

react-router-dom从v6版本开始，<Route>组件的API发生了关键变更：不再支持component属性，必须使用element属性来指定路由要渲染的React元素。

你当前代码里用component={<Homepage />}是v5及更早版本的写法，v6无法识别这个配置项，导致路由匹配到/homepage路径后，找不到对应的渲染元素，最终出现页面空白和控制台警告。

修正方案 #

把<Route>的component属性替换为element属性即可，修正后的App.js代码如下：

import { Route, Routes } from "react-router-dom";
import io from "socket.io-client";
import { useEffect } from "react";
import Login from "./components/login";
import Homepage from "./components/homepage";

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/homepage" element={<Homepage />} />
      </Routes>
    </div>
  );
};

export default App;

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