React应用部署到Render后URL变更但页面不更新问题求助

本地运行的React应用一切正常，但部署到Render平台后，点击导航链接时URL会正常变更，页面却不会自动刷新，只有手动刷新浏览器才能显示对应路由的内容。控制台没有任何报错信息，当前使用React 18.2.0和react-router-dom 6.12.1版本，试过谷歌搜索到的各类方案都没能解决问题。

相关代码 #

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Container from 'react-bootstrap/Container';
import Home from './pages/Home';
import Details from './pages/Details';
import About from './pages/About';

function App() {
    return (
        <>
            <Router>
                <Navigation />
                <Container>
                    <Routes>
                        <Route exact path="/" element={<Home />} />
                        <Route path="/locations/:locationId" element={<Details />} />
                        <Route path="/about" element={<About />} />
                    </Routes>
                </Container>
            </Router>
        </>
    );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

已解决方案 #

将react-router相关模块更新至最新版本后，问题得到解决。

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