Question

我刚刚从一位同事那里接手了一个React项目，但是我不明白下面代码中的逻辑。

      content = <Switch>
        <Route path="/login" exact component={LoginPage} />
        <Route render={() => { return <Redirect to="/login" />; }} />
      </Switch>

我知道如何将Route与Component，Render和Render和Redirect一起使用，这是我第一次看到它。

谢谢

Answer 1

这似乎只是另一种说法：

<Redirect path='*' to='/login' />

由于它位于<Switch>中，并且在任何<Route>之后，它将始终匹配（如果上面没有匹配）并被渲染。

呈现Redirect组件时，它会重定向到to道具中指定的页面。

我通过阅读源代码发现了这一点。如果您有兴趣，可以使用一些间接的方法，但是基本上Redirect组件会呈现一个Lifecycle组件，该组件将在安装后立即使用提供的method调用location。

method的设置如下：

const method = push ? history.push : history.replace;

之所以这样，是因为<Redirect>组件显然可以将push用作布尔属性，以设置重定向的实现方式。

重定向组件源https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js

生命周期组件来源：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Lifecycle.js

使用react-router-dom进行Route + Render + Redirect

1 个答案: