What is the proper way to use React Router with Electron

Viewed 1085

There is no tutorial out there and there is no walk through that I could find. So I attempted to follow the "lessons" on the react router docs. Lets walk through what I have and maybe you can see where I have gone wrong and what the best solution is.

React Router 4.2.0

Lets define some routes:

import { render } from 'react-dom';
import StartUp from './components/startup.js';
import { Router, Route, hashHistory } from 'react-router';

const Routes = (
  <Router history={hashHistory}>
    <Route path="/" component={StartUp} />
  </Router>
);

render(
  Routes,
  document.getElementById('app')
);

Lets run our application, which (the base index.js) looks like this:

/* eslint strict: 0 */
'use strict';

const electron      = require('electron');
const app           = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow       = null;

require('electron-reload')(__dirname);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 1024, height: 728 });

  mainWindow.loadURL(`file://${__dirname}/src/index-electron.html`);

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

This is all compiled down with webpack 3 incase that matters anything. So the errors I get in the console when running this is:

bundle.js:572 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in RouterprintWarning @ bundle.js:572
bundle.js:913 Uncaught TypeError: Cannot read property 'location' of undefined
bundle.js:12196 The above error occurred in the <Router> component:
    in Router

Consider adding an error boundary to your tree to customize error handling behavior.
bundle.js:16770 Uncaught TypeError: Cannot read property 'location' of undefined

I assume this because I am not actually inside a browser but inside a "file" as indicated by the file:// ...

So whats the best way to use React Router with Electron, such that I can utilize the functionality of defining and redirecting routes.

0 Answers
Related