Javascript 如何使用React Router在页面视图之间呈现通用加载屏幕？

我目前基本上有：

import React, { useState, useEffect } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom'

const Component = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [isWaiting, setIsWaiting] = useState(true)

  useEffect(() => {
    const timer = setTimeout(() => setIsWaiting(false), 1000)
    return () => clearTimeout(timer)
  }, [])

  useEffect(() => {
    loadFonts.then(() => setIsLoading(false))
  })

  if (isLoading || isWaiting) return 'Loading...'

  return (
    <Router>
      <Switch>
        <Route path='/one'>
          <One />
        </Route>
        <Route path='/two'>
          <Two />
        </Route>
      </Switch>
    </Router>
  )
}

import React，{useState，useffect}来自“React”
进口{
BrowserRouter作为路由器，
转换
路线,，
}从“反应路由器dom”
常量组件=（）=>{
常量[isLoading，setIsLoading]=useState（真）
常量[isWaiting，setIsWaiting]=useState（真）
useffect（（）=>{
const timer=setTimeout（（）=>setIsWaiting（false），1000）
return（）=>clearTimeout（计时器）
}, [])
useffect（（）=>{
loadFonts.then（（）=>setIsLoading（false））
})
如果（正在加载| |正在等待）返回“正在加载…”
返回(
)
}

基本上，我想做的是，在硬浏览器页面刷新时，将加载程序显示至少1秒（因此它是一致的，稍后我将进行淡入过渡）作为我需要加载的字体，这可能需要5秒以上的时间。加载所有内容后，显示屏幕

不过，我希望它也能做到，只在硬刷新时显示此加载页面一次。当用户单击一个

One

类链接时，我希望它不会导致此顶级“App”组件的完全重新呈现，并定义所有路由和路由器。但是，它所做的是重新呈现上面的整个组件，并使计时器执行路由器的每次单击

。。。我不明白为什么这不能像你期望的那样工作。您可能希望

One

对新URL进行非硬页面更改，从路由加载内容，但不执行完整组件重建，并使加载程序再次显示

---

我做错了什么？如何使它不在每次使用

从

react router

切换页面时显示加载程序？

我无法用您的设置重现此问题（但我只能猜测

加载字体

的作用）。你能提供一个完整的例子，说明所描述的事情吗@JosefWittmann是的，看起来很有效，嗯，

loadFonts

基本上是从。webfontloader会取代DOM或其他东西吗？我的HTML文件是。@JosefWittmann您可以看到它正在运行。如果您一直滚动到底部以单击语言，则每次都会显示加载程序图标（徽标）一秒钟。如果你能在调试器中看到，我在单击一种语言时使用了

。@JosefWittmann有什么想法吗？我会在接下来的几天中查看它。我无法在你的设置中重现这个问题（但我只能猜测

加载字体

的作用）。你能提供一个完整的例子，说明所描述的事情吗@JosefWittmann是的，看起来很有效，嗯，

loadFonts

基本上是从。webfontloader会取代DOM或其他东西吗？我的HTML文件是。@JosefWittmann您可以看到它正在运行。如果您一直滚动到底部以单击语言，则每次都会显示加载程序图标（徽标）一秒钟。如果你能在调试器中看到，我在单击语言时使用的是

。@JosefWittmann有什么想法吗？我会在接下来的几天里看一看