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.