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>没有路径。还有究竟发生了什么（组件的呈现流程是什么） 如果我继续在<Switch>内编写React组件？

说出这样的话

       <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，所以用户是减速器的道具。

Answer 1

尽管文档建议仅将Route或Redirect组件作为直接子项，但

Switch仍在此处按预期工作。然而，据记载，Switch将呈现一个孩子 - 第一个与当前路线匹配的孩子。它还指定允许没有路径的<Route组件作为全能，这就是这里发生的事情。

为了简化，Switch将从上到下逐个迭代其所有子节点，并选择路径与当前路径匹配的第一个组件或组件没有指定路径（catch-all组件）。您可以在此处看到此工作：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js#L47请注意，它正在寻找Route组件的道具，但没有特别要求该组件成为Route的代码。< / p>

在您的情况下，未经身份验证的页面将呈现正常，因为它们在 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>

这也是完全有效的，但唯一可以呈现的是＆＃34;你好！＆＃34;因为那是第一个匹配的组件。

<switch>在遇到React组件时如何工作？

1 个答案: