Electron Getting Files into the Right Place

user_14935410 0
Viewed 29

I'm new to using Electron so I'm probably missing something rather simple. I'm trying to implement some simple routing in my Electron app using react-router-dom but it doesn't seem like my program can find the right files. Looking at the dev tools, the structure looks like this: app structure. I have a React component that I'm trying to access as follows:

ReactDOM.render(
    <HashRouter>
        <Routes>
            <Route path='/' element={<App />} />
            <Route path='ConfigurationEditor' element={<ConfigurationEditor />} />
        </Routes>
    </HashRouter>,
document.getElementById('root'));

When I click on a button that changes the window location to "/ConfigurationEditor", I get an error like: Failed to load URL: file:///ConfigurationEditor with error: ERR_FILE_NOT_FOUND. Looking back at the structure, this makes sense because the files for that component are buried in either the top/. or top/syntax-configuration-editor folders, not the file:// folder.

How do I get those folders under file:// (assuming that's the correct thing to do)?

Other potentially helpful/relevant info

  • The window is created through window.loadFile('index.html').
  • In my package.json, the "homepage" field is set to "./", and the "build" field looks as follows:
"asar": true,
"files": [
      "**/*",
      "dist/",
      "node_modules/**/*",
      "package.json",
      "dist/main.js"
    ],
  • The UI component:
<Button className={styles.buttonStyle}
variant='contained'  
size='large'
color='primary'
fullWidth
onClick={(e) = {e.preventDefault;window.location.href="/ConfigurationEditor"}}
>
Configurations
</Button>
electron react-router reactjs
1 Answers

Assuming ConfigurationEditor is supposed to be a React component, then the element prop takes a ReactNode, i.e. element={<ConfigurationEditor />}.

ReactDOM.render(
  <HashRouter>
    <Routes>
      <Route path='/' element={<App />} />
      <Route path='ConfigurationEditor' element={<ConfigurationEditor />} />
    </Routes>
  </HashRouter>,
  document.getElementById('root')
);

Update

Try using the useNavigate hook and use navigate("/ConfigurationEditor") instead of the hard reload using window.location.href is going to do. When the page is reloaded attempting to access a sub-route it seems Electron is expecting to find a file at that location. Using the navigate function doesn't reload the page and keeps the app running on "/" and handling routes/pages internally.

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

...

const navigate = useNavigate();

...

<Button className={styles.buttonStyle}
  variant='contained'  
  size='large'
  color='primary'
  fullWidth
  onClick={(e) = {
    e.preventDefault;
    navigate("/ConfigurationEditor");
>
  Configurations
</Button>
user_86908570
Related