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

Question

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

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

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

感谢任何帮助。

Answer 1

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

<Switch>
   <Route path="/" component={RootComponent} />
   <Route path="/test" component={TestComponent} />
</Switch>

1. 检查你的路线，你有没有exact关键字的基本路线吗？

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

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

2. 你有没有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 示例项目

Answer 2

您可以在开发过程中使用 electro-reloader 来实现这一点。如果对主流程进行更改，则主流程会更新。如果对渲染器进程进行更改，则渲染器进程会更新 https://www.npmjs.com/package/electron-reloader

另一种方法是在渲染进程中记录当前路线并将其保存在本地存储中。然后，您可以在页面重新加载时转到该路线。如果您想保留状态，您可能需要在记录路线时保存状态。

localStorage.setItem('current_route', route)
localStorage.setItem('current_state, the_entire_state)

您可以使用必要的生命周期，转到所需的路线并设置状态