React Router Dom 巢外的一条路线

Question

希望这有一个简单的答案，但我还没有找到其他人问这个：我只是想用一个位于包装器之外的路由（在本例中为登录页面）创建一个路由层次结构，以及位于所述包装器内的所有其他路线（具有 header/sidebar/etc）。我正在使用 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 不匹配时，您才能呈现 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>

我从你的代码中假设 Wrapper 是包装所有东西而 App 只是包装嵌套路由。如果我理解有误，你可以换个角度。

React Router Dom 巢外的一条路线

React Router Dom one route outside of nest

javascript

reactjs

react-router-dom