React routeur Dom une route en dehors du nid

Question

J'espère que cela a une réponse simple, mais je n'ai trouvé personne d'autre demandant ceci: J'essaye juste de créer une hiérarchie de route avec un itinéraire (la page de connexion dans ce cas) vit à l'extérieur d'un wrapper, et tous les autres parcours vivant à l'intérieur de l'emballage (qui a en-tête/sidebar/etc). J'utilise réagir 16.0.0 + réagir-routeur-dom 4.2.2 et ma tentative futile de faire avancer les choses de travail est

import React from 'react'; 
import { Switch, Route } from 'react-router-dom'; 
import Wrapper from './components/common/Wrapper'; 
import App from './components/App'; 
import HomePage from './components/Home'; 
import SignInUpPage from './components/SignInUp'; 
import DistrictsPage from './components/Districts'; 
import StudioPage from './components/Studio'; 
import CollectionsPage from './components/Collections'; 


export default (
    <Wrapper> 
    <Route path="/account" component={SignInUpPage} /> 
    <App> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route path="/districts" component={DistrictsPage} /> 
     <Route path="/studio" component={StudioPage} /> 
     <Route path="/collections" component={CollectionsPage} /> 
     </Switch> 
    </App> 
    </Wrapper> 

); 

Mais évidemment, cela rend juste le composant application en dessous du signin, même résultat si je nid le composant App dans le commutateur. Merci beaucoup pour toute aide!

Answer 1

Vous pouvez rendre votre App composant uniquement si /compte ne correspond pas:

<Wrapper> 
    <Switch> 
    <Route path="/account" component={ SignInUpPage } /> 
    <Route path="/" component={ App } /> 
    </Switch> 
</Wrapper> 

... puis déplacez vos autres routes dans votre App composant:

App.js

<Switch> 
    <Route exact path="/" component={ HomePage } /> 
    <Route path="/districts" component={ DistrictsPage } /> 
    <Route path="/studio" component={ StudioPage } /> 
    <Route path="/collections" component={ CollectionsPage } /> 
</Switch> 

Je suppose de votre code que Wrapper est d'envelopper tout et App est seulement pour envelopper les routes imbriquées. Vous pouvez les changer si j'ai mal compris.