Javascript ReactJs this.props.history.push（）不工作

我是Reactjs新手，出于某些原因，我正在开发一个用于学习的小应用程序

我使用react router dom在不同组件之间导航

其思想是，当用户单击注销时，应用程序组件应该在componentWillUpdate（）方法中检测注销事件，然后将用户重定向到登录组件

错误是：

Routes.js

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react- 
router-dom';
import Login from '../Components/LoginComponent/Login';
import AddNoteForm from "../Components/AddNoteForm";


const AppRouter = () => (
<BrowserRouter>
        <Switch>
            <Route path="/" component={AddNoteForm} exact={true} />
            <Route path="/login" component={Login} exact={true} />
        </Switch>
</BrowserRouter>
);

export default AppRouter;

请使用，您可以在

App.js

 componentWillUpdate(nextProps, nextState) {

if (nextProps.store.user.email === null || nextProps.store.user.email 
== undefined) {
  return <Redirect to="/login" />
}

组件将更新（下一步，下一步状态）{
if（nextrops.store.user.email==null | | nextrops.store.user.email
==未定义）{
返回
}

请使用，您可以在

App.js

 componentWillUpdate(nextProps, nextState) {

if (nextProps.store.user.email === null || nextProps.store.user.email 
== undefined) {
  return <Redirect to="/login" />
}

组件将更新（下一步，下一步状态）{
if（nextrops.store.user.email==null | | nextrops.store.user.email
==未定义）{
返回
}

要在道具中包含

历史记录，您可以使用。

更新
App.js
文件，如下所示：

import { withRouter } from 'react-router'

...

export default withRouter(connect(mapStateToProps)(App));

要在道具中包含
历史记录
，您可以使用。

更新
App.js
文件，如下所示：

import { withRouter } from 'react-router'

...

export default withRouter(connect(mapStateToProps)(App));

您的
应用程序
组件没有使用
浏览器路由器
进行包装。您需要像这样包装它：

const Routes = () => (
    <Switch>
        <Route path="/" component={AddNoteForm} exact={true} />
        <Route path="/login" component={Login} exact={true} />
    </Switch>
);

const jsx = (
<Provider store={store}>
    <MuiThemeProvider> 
       <BrowserRouter>
         <div>
           <AppRouter />
           <Route component={App} />
         </div>
       <BrowserRouter>
    </MuiThemeProvider>
</Provider>
);

const Routes=（）=>(
);
常数jsx=(
);
您的
应用程序
组件没有使用
浏览器路由器
进行包装。您需要像这样包装它：

const Routes = () => (
    <Switch>
        <Route path="/" component={AddNoteForm} exact={true} />
        <Route path="/login" component={Login} exact={true} />
    </Switch>
);

const jsx = (
<Provider store={store}>
    <MuiThemeProvider> 
       <BrowserRouter>
         <div>
           <AppRouter />
           <Route component={App} />
         </div>
       <BrowserRouter>
    </MuiThemeProvider>
</Provider>
);

const Routes=（）=>(
);
常数jsx=(
);
我刚读了标题，但我在这里看到了一个大错误
这个。道具
应该是只读的。我刚读了标题，但我在这里看到了一个大错误
这个。道具
应该是只读的。你能不能用更好的方式解释一下，我是否应该像你提到的那样更改Routes.js文件？@Benfarhatsohaib首先要做的是你的
App
组件必须是
BrowserRouter
的子组件才能使用
history
。第二件事-你需要以某种方式传递
history
道具。你可以使用
with router
HOC或使用
Route
组件来传递它。你能不能用更好的方式解释一下，我是否应该像你一样改变Routes.js文件注意？@BenFarhatSouhaib第一件事是你的
应用程序
组件必须是
浏览器路由器
的子组件才能使用
历史
。第二件事-你需要以某种方式传递
历史
道具。你可以使用
路由器
HOC或使用
路由
组件来传递它。