Question

我正在阅读react-router-redux examples，我很困惑，之间有什么区别：

import { Redirect } from 'react-router-dom'

...

<Redirect to='/login' />

和

import { push } from 'react-router-redux'

...

push('/login')

Answer 1

<强>重定向

渲染<Redirect>将导航到新位置。新位置将override the current location in the history stack,与服务器端重定向（HTTP 3xx）一样。

而历史

推送功能 Pushes a new entry onto the history stack

Answer 2

默认情况下，<Redirect>组件将用历史记录堆栈中的新位置替换当前位置，基本上用作服务器端重定向。

但是它也可以与属性push一起使用，在这种情况下，它将把新条目推入历史记录堆栈，其工作方式与history.push相同。

实际上，<Redirect>组件在后台使用了历史记录push和replace方法。这只是一种更多的React导航方式。

因此，基本上，您有两种导航方式：

在组件（通常用history.push HOC包装）中使用history.replace和withRouter，这样您就可以访问location对象而无需将其从父母传递给孩子。
根据是否使用<Redirect>组件使用push属性，具体取决于

Answer 3

在我的 Redux 和 Typescript 用例中，我注意到两者之间的区别。

这是它的简化版本：

    export const LandingPage = () => {
      const { history } = useHistory();
      const { viewer } = useSelector(state => state.viewer);

      // Redirect method returns another component that handles the redirect
      // without mounting any of the route components
      if (!viewer?.token) {
        return <Redirect to="/signin"/>;
      }

      // History.push method mounts the route component and runs 'onload' functions
      // Which can still throw an error if there's no viewer 
      // if (!viewer?.token) {
      //    history.push('/signin');
      //    // return history.push('/signin');  // throws Typescript error
      // }

      return (
        <Switch>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/profile" component={Profile}/>
          <Route path="/" component={Home}/>
        </Switch>
      );
    };

使用 history.push() 方法时，return 语句中的 JSX 仍然可以挂载和运行，而返回 Redirect 会阻塞其余代码。

react-router Redirect vs history.push

3 个答案: