React Router 在刷新页面之前无法加载页面

Question

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

当我点击此链接时，预加载会无限制地加载。 当我手动刷新页面时，它可以正常工作。

- TANBHIR HOSSAIN Spring 21

---

确保你使用的<Link>组件是来自于react-router库。 - P-A

我认为问题出在你的关于页面，而不是你设置路由的方式，否则预加载根本不会显示。 - P-A

Answer 1

我也面临了这个挑战。我通过在index.js中用标签替换标签来解决它。

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

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

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

注意：在App.js中添加标签来包装所有组件并不等同于上述操作。

类似问题在此处。

- Abdulrazaq Haroon

Answer 2

将to={'/about}改为to='/about'，希望问题能够解决。

- shoaibzaak

---

问题虽然改变，但仍然存在。 - TANBHIR HOSSAIN Spring 21

你能和我分享包含加载圆圈的其他代码片段文件吗？ - shoaibzaak

Answer 3

我遇到了同样的问题，所以我重新安装了react-router-dom包，问题得到了解决

在PowerShell中运行以下命令以重新安装React Router包

npm install react-router-dom

或者

yarn add react-router-dom

- Divyam

Answer 4

希望你使用的模板是使用 jQuery 创建的，因为这些模板通常为要在页面加载时显示的 div 元素放置了一个名为 .preloader 的 class。

jQuery 会在页面完全下载其资产(如图片、css 文件等)后淡出预加载页面。

但是 React 特别是 react-router-dom 并不完全遵循相同的流程，它有自己的生命周期。

提示是进入您的模板 HTML 文件并注释掉预加载部分，该部分类似于下面的内容，只需将其注释掉即可。

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

2。你可以选择使用它，通过React生命周期方法来操作显示/隐藏效果。

- ndotie