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

Question

我目前基本上有这个：

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>
  )
}

基本上我想要做的是，在hard-browser-page-refresh 上，显示一个加载器至少 1秒（所以它是一致的，稍后我会做一个淡入淡出过渡）作为我需要的字体加载，这可能需要 5 秒以上。加载完所有内容后，显示屏幕。

不过，我希望它做的只是在硬刷新时仅显示此加载页面一次。当用户单击<Link to='/one'>One</Link>某种链接时，我希望它不会导致这个顶级“应用程序”组件的完全重新渲染，其中包含所有路由和定义的路由器。但是，它所做的是重新渲染上面的整个组件，并导致计时器执行路由器的每次点击<Link to...>......我不明白为什么这不像你期望的那样工作。您希望对<Link to='/one'>One</Link>新 URL 进行非硬页面更改，从路由加载内容，但不进行完整的组件重建并导致加载器再次显示。

我究竟做错了什么？如何让它在每次使用<Link to...>from切换页面时不显示加载器react-router？

标签： javascriptreactjsreact-router