react-router v3：进入和离开特定路线时如何重新加载页面答案

【问题标题】：react-router v3: how to reload page when entering and leaving a specific routereact-router v3：进入和离开特定路线时如何重新加载页面
【发布时间】：2020-05-08 16:58:50
【问题描述】：

我有一个用于单页应用程序的特定路由，我希望在用户进入或离开此路由时使页面完全重新加载。

    <Route
      key={routeKeyGen()}
      path="/example"
      component={Example}
      onEnter={onExampleRoute}
    />

我尝试通过设置onEnter 来刷新浏览器页面来做到这一点：


const onExampleRoute = () => window.location.reload();

当页面不断重新加载时，我很快意识到这很荒谬。我认为离开路线时也不会处理。

编辑这是Route的React Router v3 API：https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#route

编辑 2：在 React Router v3 API 中有一个 onLeave Route：https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#onleaveprevstate

【问题讨论】：

有一个概念叫做服务器端渲染。看看这篇文章，它解释了如何在服务器端渲染一些路由。 tylermcginnis.com/react-router-server-rendering
您需要考虑一个事实：使用 SPA，当您直接从浏览器打开任何路由时，例如/about 无论路由如何，您的服务器都会返回您的 index.html 文件，并且当 JS 包加载时，react-router 将显示 /about 而不是默认的 /。所以..并不是说没有解决方法来刷新页面......但最有可能的是，有更好的方法可以在不使用页面重新加载的情况下实现您想要做的事情。提供有关目的的一些细节会有所帮助。
@evolon 我想这样做的原因是有条件地加载 index.html 文件中的供应商脚本，以便特定路由不会加载该脚本。这不是一个理想的场景，最终目标是重构这个供应商脚本的实现方式，但我试图在此期间将其设置为重新加载路线，直到供应商脚本以不同的方式实现。我对解决方案没有完全的余地，因为它不是个人项目。

标签： javascript reactjs react-router

【解决方案1】：

纯 React 最简单的解决方案是：

在路由组件中以编程方式加载脚本

如果这是您的route.js 文件

<Route path="/path/you/want/to/load/js" component={Page.js} />

在Page.js 组件中：

class Page extends Component {

   ...

   componentDidMount () {
      const script = document.createElement("script");

      script.src = "https://path/to/your/file.js";
      script.async = true;
      script.onload = this.handleScriptLoad;

      document.body.appendChild(script);
   }

   handleScriptLoad = () => {
      // the script loaded!!!
   }

   ...
}

更多详情可以看这里： Adding script tag to React/JSX

【讨论】：

这很聪明！谢谢@evlon