React 路由器需要几秒钟来路由答案

【问题标题】：React router takes several seconds to routeReact 路由器需要几秒钟来路由
【发布时间】：2019-11-30 02:25:03
【问题描述】：

      <Switch>         
        <Route path="/" exact component={Panels}/>           
        <Route path="/settings" component={ImgurPage}/>          
        <Route path="" component={Panels} />
      </Switch>

从主页到设置页面的路由很好。但是，当我在设置页面中使用“this.props.history.goBack()”后退一步时，需要三秒钟才能重新路由。

看看这个post，我也试过用withRouter包装，我仍然遇到同样的问题。

export default withRouter(connect(mapStateToProps,{getclientid,getClientSecret,imgurFormSubmit})(ImgurPage))

redux 会减慢我的路由速度吗？

编辑：我已按照建议删除了默认情况。仍然遇到同样的问题。 HashRouter 有问题吗？

    <HashRouter>

        <Switch>

            <Route path="/" exact component={Panels}/>

            <Route path="/settings" component={ImgurPage}/>          

        </Switch>
     </HashRouter>

【问题讨论】：

遇到了一个类似的问题，我认为路由器只是挂了几秒钟然后更新路由，但是在新路由的componentDidMount 上记录了日志路由立即发生，实际上是 React 在构建新 DOM 时速度很慢/延迟/等等。我进行了性能审计，最终发现我们有一个排版类组件，它需要 4 到 6 毫秒才能创建（与大多数其他函数调用的几分之一毫秒相反）。我建议你尝试同样的方法来缩小瓶颈所在。
这是 componentDidMount 内部函数的问题。我正在从文件中检索数据列表。每次我路由时它都会触发
啊，是的，为了解决这个问题，我实际上使用了“假加载”技巧来渲染加载微调器，以便更快地进行第一次渲染。我们只是从 redux 存储加载大量数据并构建一个大列表，因此向用户表明“某事”正在发生的任何迹象都比看起来冻结的页面要好。在您的情况下，惯用的解决方案也是在您发送异步数据请求时存储本地加载状态 (true)，当它解决时，将加载设置为 false 并呈现您的数据。 OFC，还有其他解决方案可以帮助保持这一结果。
有没有办法让它在我启动应用程序时只获取一次数据？
是的，有几个。最简单的方法可能是将数据加载调用更靠近应用程序根目录，例如在您的路由组件中，因为它可能在您的应用程序启动时安装一次。但是页面刷新会导致重新挂载（和数据重新获取）。其他解决方案涉及应用程序状态管理，例如 redux。还有更多涉及将数据持久化到本地存储（刷新后重新加载并且不重新获取）。这实际上取决于您的需求，但现在在这里更详细地讨论您的问题有点超出了范围。

标签： reactjs redux react-router-dom

【解决方案1】：

这里不需要 withRouter。正如您在路线的组件中一样。您将拥有路由器上下文。

为什么你有<Route path="" component={Panels} />。当用户导航到根目录时，您已经拥有面板组件。尝试删除此行以及使用Router。

【讨论】：

我已经删除了线路和withRouter。我还是越来越滞后。请检查我的编辑