时间戳

首页 > 解决方案 > 使用 history.push 时，不会呈现以下屏幕

javascript - 使用 history.push 时，不会呈现以下屏幕

问题描述

更改屏幕时，使用 history.push 不会加载新屏幕。

我看过一些关于它的帖子，但实际上没有任何解决方案有帮助。

ReactDOM.render(
  <Router history={history}>
    <Provider store={store}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Provider>
  </Router>,
  document.getElementById('root')
);

以上是我的主要组件，我使用redux的地方

const isLogged = localStorage.getItem('user')
const PrivateRoute = (props) => {
  return isLogged ? <Route {...props} /> : <Redirect to="/login" />
}

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="container-fluid p-0" style={{ backgroundColor: 'rgba(0,0,0,0.2)', }}>
        <Switch>
          <Route exact path='/login' component={Login} />
          <PrivateRoute exact path="/" component={Dashboard} />
        </Switch>
        <AlertComponent />
      </div>
    </MuiThemeProvider>
  );
}

这是我的路由组件，其中有登录屏幕和应用程序的主屏幕。

const authenticate = () => {
    setLoading(true)
    UserService.login(email, password, (response) => {
      setLoading(false)
      response.error ?
        dispatch(createAlertError('Email e/ou senha inválida'))
        :
        dispatch(userSignInSuccess(response.user.shift()))
      history.push('/')
    })
  }

在我的登录组件中，当调用此函数时，路由会发生变化，但新组件不会更新。

这是存储库链接

标签： javascriptreactjsreact-router

解决方案

您的代码中有一些问题可以更正

在您的主要组件中，不要将 Provider 包装为<Router>, wrap in <Provider />，这样路由处理程序就可以访问商店。了解更多点击

ReactDOM.render(
    <Provider store={store}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Provider>,
  document.getElementById('root')
);

在您App.js使用<Router>并且不需要在那里注入历史对象时，当您使用反应路由器时，连接的组件将可以访问它。

就像<PrivateRoute>创建一个额外的组件一样<PublicRoute>，它将执行完全相反的检查<PrivateRoute>

const isLogged = localStorage.getItem('user')
const PrivateRoute = (props) => {
  return isLogged ? <Route {...props} /> : <Redirect to="/login" />
}

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="container-fluid p-0" style={{ backgroundColor: 'rgba(0,0,0,0.2)', }}>
        <Router>
          <Switch>
            <Route exact path='/login' component={Login} />
            <PrivateRoute exact path="/" component={Dashboard} />
          </Switch>
        </Router>
        <AlertComponent />
      </div>
    </MuiThemeProvider>
  );
}

尝试以上步骤，让我知道您的进度，谢谢

推荐阅读