Comment partager React Router à travers différentes mini-applications dans la même application

Question

J'expérimente avec réagir dans une application Angular. J'utilise actuellement ngReact pour charger les composants de réaction dans mon application angulaire.

J'utilise react-router (2.8.1) pour une section de mon application. J'ai créé une autre section et je veux aussi utiliser le routeur de réaction. Malheureusement, je rencontre des problèmes, le seul routeur qui fonctionne et est reconnu est le premier routeur que je visite. Voici ce que j'ai observé.

1. Les deux routeurs se chargent lorsque mon application charge la page d'accueil. Comment puis-je savoir? J'ai ajouté une propriété à l'objet Router et console.logged les propriétés dans les fichiers que les routeurs sont créés.
2. Si je visite d'abord le routeur A, le routeur A fonctionne! Lorsque je visite la page en utilisant le routeur B, le routeur B ne semble pas être reconnu et ne fonctionne pas, j'obtiens l'erreur "Attention: [router-router] Emplacement"/RouteB "ne correspond à aucun itinéraire". Ce solution did not work.
3. Dois-je refactoriser mes routeurs dans un fichier volumineux qui inclut toutes mes routes que j'utilise avec le routeur de réaction? Il semble que j'ai besoin de refactoriser tout ou il me manque quelque chose.
4. Je suis plus familier avec le routage backend, en particulier en utilisant express.Router où une instance est créée et le routeur n'est pas partagé.

Voici des extraits de mes deux routeurs qui sont utilisés dans différentes sections de mon application.

Routeur A:

import React from 'react'; 
import {Router, Route, browserHistory, IndexRoute} from 'react-router'; 

/* Note, additional import statements for components */ 

const Routes =() => (
    <Router history={browserHistory}> 
    <Route path="/RouteA"> 
     <IndexRoute component={UserIndex} /> 
     <Route path=":RouteAId"> 
     <IndexRoute component={index} /> 
     <Route path="user" component={user} /> 
     <Route path="profile" component={profile} /> 
     <Route path="preview" component={previewUpdate} /> 
     <Route path="interest/:interestId/resume" component={CoverLetterRoute} /> 
     </Route> 
     <Route path="*" component={NoMatch} /> 
    </Route> 
    </Router> 
); 

export default Routes; 

Routeur B:

import React from 'react'; 
import {Router, Route, browserHistory, IndexRoute} from 'react-router'; 
import Main from '../components/Main'; 

const Routes =() => (
    <Router history={browserHistory}> 
    <Route path="/onboarding" component={Main} /> 
    </Router> 
); 

export default Routes; 

Est-il possible d'avoir deux routeurs distincts comme celui-ci? Dois-je charger tous mes itinéraires dans un Router? S'il vous plaît commenter si vous avez besoin de plus d'informations.

Answer 1

Utilisez une seule application côté client avec un seul routeur en utilisant différentes routes. Cela vous permettrait de partager du code plus facilement et de créer un lien transparent entre une partie de l'application et l'autre. Vous devrez configurer votre serveur pour qu'il serve le même script à la fois pour/users et/onboarding.

var routes = (
     <Route handler={App}> 
     <Route path="https://stackoverflow.com/users/welcome" handler={Welcome} /> 
     <Route path="/onboarding"> 
      {/* onboarding routes here */} 
     </Route> 
     </Route> 
    ); 

2ème option (non recommandée): Utilisez deux points d'entrée différents, chacun utilisant son propre routeur. Cela isolerait chacune de vos applications, et vous ne seriez pas en mesure de passer d'une «application» à l'autre sans un aller-retour du serveur. Vous devez configurer votre webpack et votre serveur pour qu'il serve différents scripts (d'entrée) pour/users et/onboarding. Et pour le lien vers l'autre application, vous devez utiliser le <a href> normal au lieu de <Link to>.