反应路由器重定向与 history.push

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和history.replace（通常用withRouter HOC包裹，这样你就可以访问location 对象而无需将其从父级传递给子级。
根据

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 仍然可以挂载和运行，而 returning 重定向会阻止您的其余部分代码。

反应路由器重定向与 history.push

react-router Redirect vs history.push

react-router

react-router-v4

react-router-redux

react-router-dom