Comment utiliser Réagir Routeur avec de l'Électron?

À l'aide de ce standard comme référence, j'ai créé un Electron app. Il utilise webpack de regrouper les scripts et les exprimer serveur de l'hôte.

Webpack config est pratiquement la même que cette et le serveur cette.

De l'électron script 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 exécuter electron index.js pour construire l'application et node server pour démarrer le serveur à l'aide de webpack faisceaux les scripts.

Il fonctionne très bien, mon Réagir composant d'Application est monté. Mais comment je peux intégrer réagir-routeur dans tout cela?

J'ai implémenté de la même manière que je serait dans un navigateur application. J'obtiens cette erreur:

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

Elle prend chemin d'accès du fichier que l'itinéraire. En passant par la chaudière de la plaque de code n'a pas aidé. Ce qui me manque?

  • Exactement la même chose. Avez-vous trouvé une solution, @arjun-u – ou avez-vous simplement aller pour hashHistory à la place?
  • J'ai utilisé hashHistory.
InformationsquelleAutor Frozen Crayon | 2016-04-08
  1. 20

    Une autre option serait d'utiliser hashHistory à la place. En fait, dans votre référencé repo vous pouvez voir qu'ils sont à l'aide de hashHistory, que diriez-vous d'essayer et de les republier?

    InformationsquelleAutor aestrro
  2. 23

    Je suis l'aide de Réagir Routeur v4 et ne voulait pas revenir sur le HashRouter, donc je l'ai résolu avec quelque chose entre les goûts de:

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

const App = () => (
  <BrowserRouter>
    <div>
      {window.location.pathname.includes('index.html') && <Redirect to="/" />}
    </div>
  </BrowserRouter>
);
    • Votre solution fonctionne sauf le rechargement d'électrons mènera à une page vierge. Ce n'est pas un problème en "production", mais dans le développement, j'ai souvent besoin de recharger. T-il vous arriver?
    InformationsquelleAutor Niekert
  3. 23

    Dû Remplacer BrowserRouter avec HashRouter.

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

    Et puis dans mon index.js ou l'entrée de fichier de l'Électron application, j'ai eu quelque chose comme ceci:

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

    Et puis tout simplement travaillé.

    Le raisonnement: BrowserRouter est destinée à demander à des environnements tandis que HashRouter est conçu pour les environnements basés sur des fichiers.

    Lire la suite ici:

    • L'homme! vous avez sauvé ma semaine entière! J'ai essayé des milliers de milliards de combinaisons et de googlé comme pour toujours.. Maintenant, il fonctionne comme un charme! merci
    • J'ai eu exactement la même semaine, donc quand j'ai trouvé comment faire, j'ai pensé que je ferais mieux de la partager, enregistrer certains autres pauvre âme. Content que ça vous a sauvé un certain temps et de la raison! =-)
    • Merci man! Vous littéraire a sauvé ma journée.
    • href="https://gph.is/1Ai9qFt" >gph.est/1Ai9qFt
    • littéralement* (facepalm)
    InformationsquelleAutor Joshua Pinter
  4. 10

    Meilleure option au moment de la cette réponse est d'utiliser le MemoryRouter, a fonctionné pour moi 🙂

    • Merci @gabriel-matusevich vous avez sauvé ma journée!
    InformationsquelleAutor Gabriel Matusevich
  5. 2

    L' (en cours) réagir-routeur docs dire:

    En règle 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 fichier statique serveur.

    Un Électron application est en fait un fichier statique serveur.

    MemoryRouter peut également fonctionner, aussi longtemps que le routage provient de la Réagir la partie de l'application. Il ne tombe vers le bas lorsque vous souhaitez accéder à une page spécifique du processus de Navigateur, par exemple, vous voulez faire apparaître une nouvelle fenêtre et de passer directement à un "Préférences Générales" page. 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 de l'explorateur de processus).

    InformationsquelleAutor starkos
  6. 2

    D'accord avec Niekert.
    Mais je crois que c'est mieux à gérer comme cela avant tout la gestion des routes.

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