React Router配置后Home组件不显示，Header与Footer正常加载问题求助

问题原因 #

你使用的是React Router v6版本，该版本对Route组件API做了破坏性变更，原有v5版本的写法不再适用，因此Home组件无法正常渲染：

• v5版本通过component属性传入路由对应组件，v6版本移除了该属性，替换为element属性，需要直接传入组件JSX
• v6版本路由默认启用精确匹配，不需要额外添加exact属性

解决方法 #

修改App.js中Routes包裹的Route代码即可：

// 旧写法
<Route exact path="/" component={Home} />

// 新写法
<Route path="/" element={<Home />} />

修改后完整的App.js参考：

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./component/layout/Header/Header.js";
import Footer from "./component/layout/Footer/Footer.js";
import WebFont from "webfontloader";
import React from "react";
import Home from "./component/Home/Home.js";

function App() {
  React.useEffect(() => {
    WebFont.load({
      google: {
        families: ["Roboto", "Droid Sans", "Chilanka"],
      },
    });
  }, []);

  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

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