反应路由器 Dom 在巢外的一条路线

Posted 2023-02-22

【中文标题】反应路由器 Dom 在巢外的一条路线

【英文标题】：React Router Dom one route outside of nest

【发布时间】：2018-03-13 17:37:35

【问题描述】：

希望这有一个简单的答案，但我还没有找到其他人问这个问题：我只是想用一个位于包装器之外的路由（在本例中为登录页面）创建一个路由层次结构，并且每个位于所述包装器内的其他路线（具有标题/侧边栏/等）。我正在使用 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 中，结果相同。非常感谢您的帮助！

【参考方案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 v4，您可以将子路由放入组件中。