CODEWITHSUNDEEP
javascriptreactjswebpackreact-routerelectron
Kyle Bernstein
Kyle Bernstein

Reputation: 93

React, Electron, And Router

I am currently to adapt a simple web app i made (using React and Redux) into a native desktop app.

I am using GitHub's Electron and Webpack to do this. Everything is fine if I use hashHistory from React-Router.. but I want to use browserHistory so my app will still look nice (URL-wise) when running as a webapp. If i do this though, I get the following error:

No route matches path ".../index.html"

Which makes sense to me. I am loading index.html as the main file for Electron:

mainWindow.loadURL('file://' + __dirname + '/index.html');

I'm just wondering if it is at all possible to use browserHistory with React-Router and Electron. If anyone knows it would be greatly appreciated!

Upvotes: 2

Views: 1665

Answers (1)

Krzysztof Sztompka
Krzysztof Sztompka

Reputation: 7204

Not exactly. But there is even better solution .

You should Separate from your react app the bootstrap file. Bootstrap file which load your app and pass to it some additional params from outside.

In your situation you will create two bootstrap files, one for electron - with memoryHistory (I think it is better for electron) and second one for browsers with browser history.

Example of bootstrap file for electron index-electron.jsx:

import React from "react";
import ReactDOM from "react-dom";
import { createMemoryHistory } from "react-router";
import App from "./App.jsx";

const initialState = window.__INITIAL_STATE__;
const config = window.__CONFIG__;

const history = createMemoryHistory("begin-path");

ReactDOM.render(
  <App
    config={config}
    history={history}
    initialState={initialState}
  />, document.getElementById("root"));

Example of bootstrap file for browsers index-browser.jsx:

import React from "react";
import ReactDOM from "react-dom";
import { browserHistory } from 'react-router';
import App from "./App.jsx";

const initialState = window.__INITIAL_STATE__;
const config = window.__CONFIG__;

ReactDOM.render(
  <App
    config={config}
    history={history}
    initialState={initialState}
  />, document.getElementById("root"));

In my examples difference is small (only history) but you can make more changes. As you see I also provide additional begin params from outside (initialState, config);

And how your App should :

import React from 'react';
import { Router, Route } from 'react-router';
class App extends React.Component {
  static propsTypes = {
    history: React.PropTypes.object,
    config: React.PropTypes.object,
    initialState: React.PropTypes.object
  };
  render() {
    return (
      <Router history={this.props.history}>
        <Route ...>
          ...
        </Route>
      </Router>
    );
  }
}
export default App;

Above code is only conception. It is from my project, where I removed obsolete things. Therefore without some modification it may not work

Now for electron you use index-electron.jsx, and for browsers index-browser.jsx. Most of your code is reusable cross both envs. And it is very flexible.

Upvotes: 2

Related Questions