React导航栏无报错但浏览器不显示，路由跳转失效问题求助

问题出在React Router v6的API变更上，v6版本不再支持<Route>组件的component属性，需要改用element属性并传入组件的JSX实例。

修改Navbar.js代码 #

将原来的component={Home}替换为element={<Home />}，component={History}替换为element={<History />}，修改后的代码如下：

import React from 'react'
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import History from './History';

function Navbar() {
  return (
    <div>    
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/history" element={<History />} />
      </Routes>
    </div>
  )
}

export default Navbar

验证其他组件 #

确保Home.js和History.js文件存在于pages目录下，并且正确导出组件，比如Home.js的示例结构：

import React from 'react';

function Home() {
  return <div>Home页面内容</div>;
}

export default Home;

修改后重新运行项目，访问http://localhost:3000/就能看到Home页面，访问http://localhost:3000/history就能看到History页面，同时App.js里的<h1>Hi</h1>会一直显示在顶部。

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