React Router 在刷新頁面之前不加載頁面

Question

您好，我是 Tanbhir Hossain，我正在嘗試轉換 HTML 模板以響應 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>

當我點擊 This Link Preloading 時 Loading unlimited time

當我手動刷新頁面時，它工作正常

Answer 1

刪除 to={'/about} 到 to='/about' 我希望問題能得到解決

Answer 2

希望您使用的是使用 jquery 創建的模板，這些模板通常會在頁面加載時顯示.preloader class 的 div 元素

jquery 在頁面完全下載其資產（即圖像、css 文件等）后淡出預加載器頁面。

但是 react 尤其是 react-router-dom 並不遵循完全相同的程序。 它有自己的生命周期

一個提示是 go 到您的模板 html 文件並注釋掉如下所示的預加載器部分，只需將其注釋掉。

<div className="preloader">
    ....
</div> 

2 . 你可以選擇玩它，讓反應生命周期方法操縱顯示/隱藏效果

Answer 3

我也面臨這個挑戰。 我通過在 index.js 中用<BrowserRouter>標簽替換<React.StricMode>解決了這個問題。

// index.js 應該看起來像這樣

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

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

注意：在 App.js 中添加標簽來包裝所有組件與上面的不同。

類似的問題在這里

Answer 4

我遇到了同樣的問題所以我重新安裝了 react-router-dom package 我的問題得到了解決

在您的 powershell 中運行這些命令以重新安裝 reactrouter 包

npm install react-router-dom

要么

yarn add react-router-dom