React Router 不加载页面，直到刷新页面答案

【问题标题】：React Router not loading page Until Refresh The pageReact Router 不加载页面，直到刷新页面
【发布时间】：2022-07-31 06:15:33
【问题描述】：

您好，我是 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>

当我单击此链接时，预加载是无限时间加载

当我手动刷新页面时，它工作正常

【问题讨论】：

确保您拥有的
我认为问题出在您的 about 页面上，而不是您设置路由的方式，否则预加载根本不会显示

标签： javascript html reactjs router

【解决方案1】：

删除 to={'/about} 到 to='/about' 我希望问题能得到解决

【讨论】：

改变但同样的问题......
你能把你的加载圈所在的其他代码sn-ps文件分享给我吗

【解决方案2】：

希望您使用的是使用 jquery 创建的模板对于这些模板，通常会为页面加载时显示的 div 元素放置一个 .preloader 类

当页面完全下载其资产（即图像、css 文件等）时，jquery 会淡出预加载器页面。

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

提示是转到您的模板 html 文件并注释掉如下所示的预加载器部分，只需将其注释掉。

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

2。你可以选择玩它，让反应生命周期方法操纵显示/隐藏效果

【讨论】：