在嵌套之外的一个路由上反应路由器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>

);

但显然，这只是在登录下方呈现应用程序组件，如果我将应用程序组件嵌套在Switch中，则结果相同。非常感谢您的任何帮助！

Answer 1

仅当 /account 不匹配时，才能呈现应用组件：

<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只是包装嵌套的路由。如果我误解了，您可以切换它们。