以下是我写的代码，
其中HOME文件夹里的index.js代码如下：
import React from 'react'
import { Outlet } from 'react-router-dom'
import './index.css'
export default class Home extends React.Component {
render() {
return (
<div style={{ backgroundColor: 'skyblue', padding: 10 }}>
{/* 首页 */}
<Outlet />
app.js代码如下：
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Homepage from "./pages/Home/homepage.js";
import Todo from "./pages/Home/homepage.js";
import Message from "./pages/Home/homepage.js";
import PersonalCenter from "./pages/Home/homepage.js";
import Home from './pages/Home/index';
import CityList from './pages/CityList';
import News from "./pages/News";
function App() {
return (
<Router>
<div className="App">
{/* 配置导航菜单 */}
{/* <ul>
<li><Link to="/home">首页</Link></li>
<li><Link to="/citylist">城市选择</Link></li>
</ul> */}
{/* 配置路由 */}
<Routes>
<Route path='/home/*' element={<Home />} >
<Route path='news' element={<News />} />
</Route>
<Route path='/homepage/*' element={<Homepage />} />
<Route path='/todo/*' element={<Todo />} />
<Route path='/message/*' element={<Message />} />
<Route path='/me/*' element={<PersonalCenter />} />
<Route path="/citylist" element={<CityList />} />
</Routes>
</div>
</Router>
)
}
export default App;
使用react希望实现以下效果：
当chrome浏览器地址栏输入 http://localhost:3000/home 时会显示如下界面，且点击“首页”、“找房”、“资讯”、“我的”四个图标其中的一个时，地址栏依然显示 http://localhost:3000/home （即地址不发生变化），如下图：
请问如何才能实现想要的效果？应该如何修改？
