<Switch>遇到里面的React Components是怎么工作的？

Question

基本上我是在理解别人的代码并修改。在 App.js 中检查用户是否登录，他必须呈现仪表板

App.js

        <Switch>
          <Redirect exact path="/" to="/dashboard"/>
          <Route path="/login" component={GuestBoard} /> 
          <EnsureSignedIn>
            <Switch>
              <Route path="/dashboard/" component={Dashboard}/>
              <Route path="/welcome/" component={Welcome}/>
           </Switch>
          </EnsureSignedIn>
       </Switch>

基本上<EnsureSignedIn> 检查用户是否已登录，它呈现所有子项。

我的问题是：如何 <Switch> 渲染没有路径的 <EnsureSignedIn>。 还有 到底发生了什么（什么是组件渲染的流程） 如果我继续在里面写 React 组件 <Switch> ?

这样说

       <Switch>
          <Redirect exact path="/" to="/dashboard"/>
          <Route path="/login" component={GuestBoard} /> 
          <Component1 />
          <Component2 /> 
          <Component3 />
       </Switch>

EnsureSignedIn：

componentDidMount() {
    if (!this.props.user) {
      this.props.history.push('/login?next=' + this.props.currentURL);
    }
render() {
        return (this.props.user ? this.props.children : null);
      }

我们用过redux，所以user是reducer的props。

Answer 1

即使文档建议仅将 Route 或 Redirect 组件作为直接子组件，Switch 仍按预期工作。然而，据记载，Switch 将呈现单个子节点 - 第一个与当前路由匹配的子节点。它还指定允许没有路径的 <Route 组件作为包罗万象，这就是这里发生的情况。

为简化起见，Switch 将从上到下一个接一个地遍历其所有子项，select 路径与当前路由匹配的第一个组件 or 组件没有指定路径（catch-all 组件）。你可以在这里看到这个工作：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js#L47 请注意，它正在寻找 Route 组件的道具，但没有代码特别要求组件是 Route.

在您的情况下，未经身份验证的页面将呈现得很好，因为它们出现在 EnsureSignIn 子组件之前。但是，如果没有其他路由匹配，EnsureSignIn 将被呈现，并且，如果用户未登录，该组件可能会重定向回登录页面 - 阻止他们访问下面的受保护页面。

如果您要像这样重构代码：

 <Switch>
      <span>Hello!!</span>
      <Redirect exact path="/" to="/dashboard"/>
      <Route path="/login" component={GuestBoard} /> 
      <EnsureSignedIn>
        <Switch>
          <Route path="/dashboard/" component={Dashboard}/>
          <Route path="/welcome/" component={Welcome}/>
       </Switch>
      </EnsureSignedIn>
   </Switch>

这也是完全有效的，但唯一会被渲染的是 "Hello!!"，因为这是第一个匹配的组件。

<Switch>遇到里面的React Components是怎么工作的？

How <Switch> works when it encounters React Components in it?

reactjs

react-router

dynamic-routing

react-router-dom