React Router Domネスト外の1つのルート

Question

うまくいけば、これは簡単な答えですが、私はこれを尋ねる誰かを見つけられませんでした：私はただ1つのルート（この場合はsigninページ）を持つルート階層を作成しようとしています。ラッパーの外に居住しており、他のすべての経路は前記ラッパー（ヘッダー/サイドバーなど）内に存在します。私は、16.0.0 +反応-ルータ-DOM 4.2.2を反応させ、物事が働いて得るために、私の無益な試みが

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> 

); 

ですが、私の巣ならば、明らかにこれはちょうど、同じ結果をサインイン以下のアプリのコンポーネントを描画する使用していますスイッチ内のAppコンポーネント助けてくれてありがとう！

Answer 1

あなたは/はが一致していないアカウント場合にのみ、あなたののAppコンポーネントをレンダリングすることができます：

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

を...そしてあなたのAppコンポーネント内にあなたの他のルートを移動：

App.js

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

あなたのコードから推測しているのはラッパーはすべてをラップし、アプリケーションはネストしたルートをラップするだけです。私が誤解している場合は、それらを回すことができます。