web-dev-qa-db-fra.com

Comment utiliser React Router with Electron?

En utilisant ce passe-partout comme référence, j'ai créé une application Electron . Il utilise webpack pour regrouper les scripts et le serveur express pour l'héberger.

La configuration de Webpack est pratiquement la même que this et server this .

Le script d'Electron se charge:

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

Et index.html charge le script hébergé par le serveur:

<script src="http://localhost:3000/dist/bundle.js"></script>

Je cours electron index.js pour créer l'application et node server pour démarrer le serveur qui, à l'aide de webpack, regroupe les scripts.

Cela fonctionne très bien, mon React composant App est montée. Mais comment j'intègre react-router dans cela?

Je l'ai implémenté de la même manière que je le ferais dans une application de navigateur. Je reçois cette erreur:

[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

Il prend le chemin du fichier comme route. Parcourir le code de la plaque de la chaudière n'a pas aidé. Qu'est-ce que je rate?

javascriptreactjsreact-routerelectron
29
Frozen Crayon

Une autre option serait d'utiliser hashHistory à la place. En fait, dans votre référentiel référencé vous pouvez voir qu'ils utilisent hashHistory , que diriez-vous d'essayer et de publier?

20
aestrro

J'ai dû remplacer BrowserRouter par HashRouter.

import {
  HashRouter,
  Route
} from "react-router-dom";

Et puis dans mon index.js ou le fichier d'entrée de l'application Electron j'avais quelque chose comme ça:

<HashRouter>
  <div>
    <Route path="/" exact     component={ Home } />
    <Route path="/firstPage"  component={ FirstPage } />
    <Route path="/secondPage" component={ SecondPage } />
  </div>
</HashRouter>

Et puis tout a fonctionné.

Le raisonnement: BrowserRouter est destiné aux environnements basés sur les requêtes tandis que HashRouter est destiné aux environnements basés sur des fichiers.

En savoir plus ici:

28
Joshua Pinter

J'utilise React Router v4 et je ne voulais pas revenir au HashRouter, donc je l'ai résolu avec quelque chose comme:

import { Redirect, BrowserRouter } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      {window.location.pathname.includes('index.html') && <Redirect to="/" />}
    </div>
  </BrowserRouter>
);
23
Niekert

La meilleure option au moment de la réponse this est d'utiliser MemoryRouter , a fonctionné pour moi :)

11
Gabriel Matusevich

Le (actuel) les documents de react-router disent :

D'une manière générale, vous devez utiliser un <BrowserRouter> si vous avez un serveur qui répond aux demandes et un <HashRouter> si vous utilisez un serveur de fichiers statique.

Une application Electron est essentiellement un serveur de fichiers statique.

MemoryRouter peut également fonctionner, tant que tout le routage provient de la partie React de l'application. Il ne tombe que lorsque vous souhaitez naviguer vers une page spécifique à partir de le processus du navigateur, par exemple, vous voulez ouvrir une nouvelle fenêtre et accéder directement à une page "Préférences générales". Dans ce cas, vous pouvez le faire avec HashRouter:

prefsWindow.loadURL(`file://${__dirname}/app/index.html#/general-prefs`);

Je ne pense pas qu'il existe un moyen de le faire avec MemoryRouter (à partir du processus du navigateur).

3
starkos

D'accord avec Niekert. Mais je crois qu'il vaut mieux gérer comme ça avant toute gestion de parcours.

if ( window.location.pathname.includes('index.html') ) {
    location.pathname = ROUTES.ROOT;
}
2
Arseniy-II