React配置Routes路由后点击导航URL跳转正常但页面空白问题求助

你当前使用的是react-router-dom v6版本，代码中仍在使用v5版本的Route组件API，导致路由匹配成功后无法渲染对应组件，出现页面空白问题。

修改步骤 #

• 移除所有Route标签上的exact属性：v6版本路由默认采用精确匹配规则，不需要额外配置该属性
• 将Route标签的component属性替换为element属性，属性值传入组件的JSX调用形式，例如component={About}需要改为element={<About />}

修改后完整app.js代码 #

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import SinglePost from "./components/SinglePost";
import Post from "./components/Post";
import Project from "./components/Project";
import NavBar from "./components/NavBar"

function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <Routes>
        <Route element={<Home />} path ="/" />
        <Route element={<About />} path ="/about"/>
        <Route element={<SinglePost />} path= "/post/:slug"/>
        <Route element={<Post />} path = "/post"/>
        <Route element={<Project />} path = "/project"/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

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