CODEWITHSUNDEEP
reactjsreact-routerelectronelectron-react-boilerplate
お休みなさい
お休みなさい

Reputation: 71

How to open new route with MemoryRouter in Electron?

I'm using Electron-React-Boilerplate to developing my app and I'm new to both Electron and React.

The boilerplate uses ReactRouter package to handle the route of the app, and I want to create a new window which shows content in specified route when user click a button. (e.g.: Opening Settings page in a new window which at the route /settings)

My Implementation

First I add a new route and set its element to SettingsPage component

<MemoryRouter>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/settings" element={<SettingsPage />} />
  </Routes>
</MemoryRouter>

Then I tried several method to open the new page

Electron window.open()

First, I use the method in Electron Docs, and use a button to call window.open() like below

<button
    onClick={function () {
        const childWindow = window.open('/settings', 'modal')
        childWindow.electron = window.electron;
    }}>
    SETTINGS
</button>

It did opened a new window, however it failed to direct to the correct content (the SettingsPage component I set before) and fallback to the HomePage with console log below

...
...
[1] <i> [webpack-dev-server] 404s will fallback to '/index.html'
...
Rewriting GET /settings to /index.html

I'm using the default file structure and default webpack settings of the Electron-React-Boilerplate I memtioned at first, and seems that webpack server could not resolve the address /settings and just redirect to the index.html so I see the HomePage of my app again in the newly opened window.

react-router-dom <Link to="">

I also tried the method in the ReactRouter as below

import { Link } from 'react-router-dom';

...

<Link to="/settings">SETTINGS<Link>

This time when I click SETTINGS link, it worked and redirect the page to the SettingsPage, however this method will NOT open a new window and just redirect the page in the current window.

I add target="_blank" and use code like <Link to="/settings" target="_blank">SETTINGS<Link>, however once I add the target="_blank" it failed again, and like the method before, the new window fallback to index.html and show HomePage of my electron app.

Besides, the windows created by <Link to="/settings" target="_blank"> has another issue, which is that the new window created by <Link> do not have access to window.electron property, which I exposed to the original window before using the preload.ts

a href

I tried to use <a href="/contest">, however this time it completely doesn't work no matter if I add the target="_blank"

In Addition

After severl trys, I also try to change the <MemoryRouter> to <BrowerRouter>, this time, <Link to="/settings" target="_blank"> can open the correct route in new window in dev env, however still meeting window.electron undefined error. but this time when app is packaged, the router was broken completely and the app even cannot load the HomePage. I searched on the Internet and see that says BrowserRouter can not work properly with some file based router env like Electron

Is the issue relevant to the way the boilerplate handles routing? Or it's just because my code is wrong? How can I open a new window and show content of a particular route (like /settings in the example) with ReactRouter's MemoryRouter?

Upvotes: 1

Views: 336

Answers (0)

Related Questions