如何在不使用电子锻造重定向到root的情况下进行热重新加载并做出反应

html5 • • 问答

我遇到了电子锻造问题，我认为这是一个常见问题，但我似乎找不到答案。

我创建了一个新项目，npx create-electron-app并且已经安装并设置了 react，一切正常。

我的问题是热重载。我正在使用react-router-dom路由，而且我MemoryRouter显然已经使用了，我没有运行电子应用程序的 URL。热重新加载是开箱即用的，但每次重新加载时，我都会导航回应用程序的入口点，我想留在当前页面上。令人讨厌的是，我通常可以看到当前页面更新一秒钟，然后才导航回 root。有什么地方可以防止这种情况发生吗？

感谢任何帮助。

回答

肯定会导致这种情况的两件事，

<Switch>
   <Route path="/" component={RootComponent} />
   <Route path="/test" component={TestComponent} />
</Switch>
  1. 检查你的路线，你有没有exact关键字的基本路线吗？

以上将匹配所有路由到根路由，并将您置于根组件中。您需要添加exact密钥

<Route exact path="/" component={RootComponent} />
  1. 你有没有homepage: "."在package.json或<base href="/">设置index.html？如果是，请删除它们。

Homepage: '.' 将默认从根服务。

您在 MemoryRouter 中使用了哪些 props？像
initialIndex，initialEntries等等？

你试了Hot module replacement吗？我不是建议将此作为解决此问题的方法，但它是一个很好的解决方法Electron-forge doc for HMR

 entryPoints: [{
          rhmr: 'react-hot-loader/patch', // react hot module replacement
          name: 'main_window',
          html: './src/renderer/index.html',
          js: './src/renderer/index.js'
        }]

Electron-forge doc说不可能在渲染器中做 HMR，你能试试上面的方法吗？它在 webpack 应用程序中对我有用。

如果上述方法没有帮助，请提供最小的可重现代码 repo/codesandbox 以帮助您进行修复。最重要的是，需要查看MemoryRouter您的应用程序中的使用情况。

根据评论更新：

是的，electron forge 默认是热重载的，只有对 CSS 文件的更改才会热重载（不刷新），对 JS 文件的更改需要刷新，在这两种情况下，文件的更改都会被监视。您可以在webpack-dev-server配置中看到注释（下面的快照）

查看您的要点MemoryRouter，我建议进行以下更改

  1. 向路由器提供内存历史道具。

        import {createMemoryHistory} from 'history';

    const history = createMemoryHistory();

    <Router history={history}>
      <Switch>
        <Route path='/dash' exact component={Dash} />
        <Route path='/wallet' exact component={Wallet} />
        <Route path='/service' exact component={ServiceStatus} />
        <Route path='/' exact component={SignIn} />
        <Route component={SignIn} /> // would suggest protected routes 
      </Switch>
    </Router>

  2. exact从除基本路线之外的其他路线中删除并将基地置于登录上方。

如果问题仍然存在，我建议您启用热模块替换（这将在不重新加载的情况下更新您的应用程序）

这是redux 和 create-react-app 的共同创建者称赞的关于热模块替换的详细文章。

从上面的帖子中获取的HMR 上的 gif（没有刷新，因此在每次更改时都不会登陆根路由，但应用程序已更新）：

一个示例应用程序来查看它的运行情况。

电子锻造HMR解决方案

Electron Forge React 示例项目

以上是如何在不使用电子锻造重定向到root的情况下进行热重新加载并做出反应的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>