路由 + 渲染 + 使用 react-router-dom 重定向

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 with react-router-dom

reactjs

react-router-dom