反應路由器 Dom 巢外的一條路線

Question

希望這有一個簡單的答案，但我還沒有找到其他人問這個問題：我只是想創建一個路由層次結構，其中一個路由（在本例中為登錄頁面）位於包裝器之外，其他所有路由都存在在所述包裝器內（具有標題/側邊欄/等）。 我正在使用 react 16.0.0 + react-router-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 組件，如果我將 App 組件嵌套在 Switch 中，結果相同。 非常感謝您的幫助！

Answer 1

僅當/account不匹配時，您才能呈現您的App組件：

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

...然后在你的App組件中移動你的其他路由：

應用程序.js

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

我從您的代碼中假設Wrapper用於包裝所有內容，而App僅用於包裝嵌套路由。 如果我誤解了，你可以把它們換過來。