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