props.history.push在机电主题中不起作用

问题描述

登录后，我没有重定向到我的用户页面，而是使用react metronic主题。我认为props.history.push（）出了点问题这是我到目前为止所做的。

主要组件如下：

ReactDOM.render(
  <MetronicI18nProvider>
    <MetronicLayoutProvider>
      <MetronicSubheaderProvider>
        <MetronicSplashScreenProvider>
          <ToastContainer/>
          <App store={store} persistor={persistor} />
        </MetronicSplashScreenProvider>
      </MetronicSubheaderProvider>
    </MetronicLayoutProvider>
  </MetronicI18nProvider>,document.getElementById("root")
);

应用程序组件：

export default function App({ store,persistor }) {
  return (
    /* Provide Redux store */
    <Provider store={store}>
      {/* Asynchronously persist redux stores and show `SplashScreen` while it's loading. */}
      <PersistGate persistor={persistor} loading={<LayoutSplashScreen />}>
        {/* Add high level `Suspense` in case if was not handled inside the React tree. */}
        <React.Suspense fallback={<LayoutSplashScreen />}>
          {/* Override `basename` (e.g: `homepage` in `package.json`) */}
          <browserRouter>
            {/*This library only returns the location that has been active before the recent location change in the current window lifetime.*/}
            <MaterialThemeProvider>
              {/* Provide `react-intl` context synchronized with Redux state.  */}
              <I18nProvider>
                {/* Render routes with provided `Layout`. */}
                <Routes />
              </I18nProvider>
            </MaterialThemeProvider>
          </browserRouter>
        </React.Suspense>
      </PersistGate>
    </Provider>
  );
}

这是我的路由器组件

   <Switch>
            {getToken()==null? (
                <Route>
                    <AuthPage/>
                </Route>
            ) : (
                <Redirect from="/auth" to="/"/>
            )}

            <Route path="/error" component={ErrorsPage}/>

            {getToken()==null ? (
                <Redirect to="/auth/login"/>
            ) : (
                <Layout>
                    <BasePage/>
                </Layout>
            )}
        </Switch>

这是我的基本组成部分

export default function BasePage() {
    return (
        <Suspense fallback={<LayoutSplashScreen/>}>
            <Switch>
                <Redirect exact from="/" to="/allUsers"/>
                <ContentRoute path="/allUsers" component={AllUsers}/>
                <Redirect to="error/error-v1"/>
            </Switch>
        </Suspense>
    );
}

这是我在登录按钮后触发的动作

 props.onLogin(values).then((res) => {
            toast.success('Login Successfull')
            props.history.push('/allUsers')
        }).catch((err) => {
            console.log('error',err)
            toast.error('Login Failed')
        })

和我有相同的AuthPage组件。

api已完全成功触发，令牌已成功保存，并且烤面包机显示为“登录成功”。但是我没有重定向到我想要的页面。但是，如果刷新，那么我将重定向到主页。

有人可以帮我吗

** history.push正在/allUsers路由中工作。但无法在登录组件中使用

更新：我想我发现自己做错了。保存令牌（我在onLogin动作中正在做）时，不需要执行任何history.push（）动作，它应该自动重定向到AllUsers页面。我将方法更改为如下所示，现在可以正常工作了。

  const {isAuthorized} = useSelector(
        ({mainAuth}) => ({
            isAuthorized: mainAuth.user != null,}),shallowEqual
    );

replaced getToken with isAuthorized

但是history.push（）在这里不起作用仍然是个谜。

解决方法

请为react-router v5.2.0使用历史包版本v4.9.0

工作示例 https://codesandbox.io/s/quizzical-dan-z3725

最初在这里回答：https://stackoverflow.com/a/64623542/1723410

我认为在您的情况下，您没有获得道具的历史参考。您可以尝试这两种解决方案。 {{1}中的withRouter和react-router中的useHistory。

react-router-dom

尝试一下

import { useHistory } from "react-router-dom";

export someclass/ReactComponent{
.
.
.
const history = useHistory();

 props.onLogin(values).then((res) => {
            toast.success('Login Successfull')
            history.push('/allUsers')
        }).catch((err) => {
            console.log('error',err)
            toast.error('Login failed')
        })
}
}

或参考this thread

我想我已经能够复制您的问题here，但不确定如何解决。但是我一会儿猜测，当您执行history.push时，您的大多数Switch都不会被触发，因此那些带有getToken的表达式不会被评估，这就是为什么我们没有重定向到任何地方。

如果以后有时间玩更多，我可能会更新此答案。

react-router-dom reactjs reactjs reactjs reactjs redux redux redux redux