React Router 在刷新页面之前不会加载页面

大家好，我是 Tanbhir Hossain，我正在尝试将 HTML 模板转换为 React js。问题出在 React Router 中。

当我单击任何页面时，仅显示预加载，直到手动刷新页面。 刷新页面时，它显示得很好。 现在我想摆脱这个问题

这是我的 RouterPage.js

import React, { Component } from 'react';
import {BrowserRouter  as Router, Routes, Route} from 'react-router-dom'
import Home from './Home';
import About from './About';
import Contact from './Contact';

class RouterPage extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Routes>
                        <Route  path='/' element={< Home />} />
                        <Route  path='/about' element={< About />}/>
                        <Route  path='/contact' element={< Contact />}/>
                    </Routes>
                </Router>
            </div>
        );
    }
}

export default RouterPage;

这是我的链接

 <Link  to={'/about' } data-toggle="dropdown" className="dropdown-toggle nav__item-link">About Us</Link>

When I click This Link Preloading is Loading unlimited time

When i manually refresh the page it's working finely

我也面临着这个挑战。我通过替换解决了这个问题<React.StricMode> with <BrowserRouter>index.js 中的标签。

// index.js 应该看起来像这样

import {BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

注意：在 App.js 中添加标签来包装您的所有内容 组件与上面不一样。

类似问题here https://stackoverflow.com/questions/72928701/react-router-link-changes-url-but-does-not-automatically-render-component#_=_