Question

更改屏幕时，使用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('/')
    })
  }

在我的登录组件中，调用此函数时，路由会更改，但是新组件不会更新。

这里是存储库link

Answer 1

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

在您的主要组件中，不要用<Router>包装提供者，而用<Provider />包装，这样路由处理程序就可以访问商店。要了解更多click

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

在App.js中使用<Router>，并且无需在其中注入历史记录对象，当您使用React 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>
  );
}

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

Answer 2

Yarn

history.go（0）再次呈现页面

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

2 个答案: