页面加载时的 React-top-loading-bar答案

【问题标题】：React-top-loading-bar on page load页面加载时的 React-top-loading-bar
【发布时间】：2021-02-18 17:10:32
【问题描述】：

我是 React 新手，我尝试在我的项目中实现这个 https://github.com/klendi/react-top-loading-bar。到目前为止，按钮正在显示栏的状态，但我不知道如何在我的页面加载时“链接”进度栏的状态。

我的代码（App.js）：

import Home from './pages/home';
import Menu from './components/menu';
import Clients from './pages/clients';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import React, { useState } from 'react';
import LoadingBar from 'react-top-loading-bar';

const App = () => {
  const [progress, setProgress] = useState(0)
    return (
      <div>
        <Router>

          <Menu/>

          <LoadingBar height="3px"  color="#1BC5BD" progress={progress} onLoaderFinished={() => setProgress(0)} />
          <button
            onClick={() => setProgress(progress + 10)}
          >
            Add 10%
          </button>
          <button
            onClick={() => setProgress(progress + 20)}
          >
            Add 20%
          </button>
          <button
            onClick={() => setProgress(100)}
          >
            Complete
          </button>
          <br/>

          <Switch>
             <Route exact path='/' component={Home} />
             <Route path='/clients' component={Client} />
             
          </Switch>
          
        </Router>
      </div>
    )
}

export default App;

编辑：我尝试了<div onClick={() => setProgress(100)}> <Menu /></div>，它实际上正在加载新页面，但只有一次。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

每次开始加载新内容时，您都需要重置进度。

当你开始加载某些东西时最好使用continuousStart，然后在加载完成后将其设置为完成：

<button
     onClick={() => ref.current.continuousStart()} >

加载完成后

() => ref.current.complete()

这里我用一个例子为你做了一个codeandbox。如果您需要更多帮助，请在其中添加更多代码。

https://codesandbox.io/s/nifty-haze-iye6s?file=/src/App.js

【讨论】：

是的，我在示例中看到了这一点，但是如何将其链接到我的页面。就像我在中的页面一样？
谢谢。这接近我想要实现的目标。问题是我的组件菜单里面有很多链接。当我按下菜单时，加载只是第一次发生。就像整个菜单都是一个按钮。
把Menu的代码给我看一下。
codepen.io/jinzagon/pen/bGBRawL的JS部分链接在{Navlink}。
codesandbox.io/s/react-loading-forked-cj9pc?file=/src/App.js 给你

【解决方案2】：

我不确定您是否正在寻找这个答案。如果你想在页面加载后做一些事情，你可以在 useEffect 钩子中做。像这样：

// Use cumputedProgress as a dependency
useEffect(() => setProgress(computedProgress), 
  [computedProgress]);

如果您的意思是这里的进度不起作用，那么尝试使用 Ref 来处理这个加载栏。

【讨论】：

我还是 React 的新手，所以我真的没有任何线索。我只想在加载页面时显示进度条。