ReactJs this.props.history.push() 不工作

Posted 2023-02-22

【中文标题】ReactJs this.props.history.push() 不工作

【英文标题】：ReactJs this.props.history.push() is not working

【发布时间】：2018-10-09 05:04:18

【问题描述】：

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

我正在使用 react-router-dom 在不同的组件之间导航。

这个想法是当用户点击注销时，App 组件应该检测到 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;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import configureStore from './Redux/Store/ConfigureStore';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


const store = configureStore();


const jsx = (
<Provider store=store>
    <MuiThemeProvider>
        <App />
    </MuiThemeProvider>
</Provider>
);

ReactDOM.render(jsx, document.getElementById('root'));
registerServiceWorker();

App.js

import React,  Component  from 'react';
import './App.css';
import  Grid, Col, Row  from 'react-bootstrap';
import Navigation from "./Components/Navigation";
import AddNoteForm from "./Components/AddNoteForm";
import Clock from "./Components/Clock";
import  connect  from 'react-redux';
import AppRoutes from "./Routes/Routes";

class App extends Component 

constructor(props) 
super(props);

  componentWillUpdate(nextProps, nextState) 

if (nextProps.store.user.email === null || nextProps.store.user.email 
== undefined) 
  this.props.history.replace('/login');


 


 render() 
 return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Welcome to this Learing React 
Application.</h1>
    </header>
    <div className="App-intro" >
      <Navigation></Navigation>
      <Grid>
        <Row className="show-grid">
          <AppRoutes />
        </Row>
      </Grid>
    </div>
  </div>
  );
 


const mapStateToProps = (store) => 
  return  store ;
;

export default connect(mapStateToProps)(App);

包.json

    
      "name": "first-react",
      "version": "0.1.0",
      "private": true,
      "dependencies": 
        "install": "^0.11.0",
        "material-ui": "^0.20.0",
        "npm": "^6.0.0",
        "react": "^16.2.0",
        "react-bootstrap": "^0.32.1",
        "react-dom": "^16.2.0",
        "react-redux": "^5.0.7",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.1.1",
        "react-spinner": "^0.2.7",
        "react-spinners": "^0.3.2",
        "react-toastify": "^4.0.0-rc.5",
        "redux": "^4.0.0",
        "redux-thunk": "^2.2.0",
        "uuid": "^3.2.1"
      ,
      "scripts": 
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      
    

【问题讨论】：

我刚看了标题，但我在这里看到了一个大错误this.props应该是只读的。

【参考方案1】：

您的App 组件没有被BrowserRouter 包裹。你需要像这样包装它：

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>
);

【讨论】：

你能否用更好的方式解释一下，我应该像你提到的那样更改 Routes.js 文件吗？

@BenFarhatSouhaib 首先是您的App 组件必须是BrowserRouter 的子组件才能使用history。第二件事 - 你需要以某种方式传递 history 道具。您可以使用withRouter HOC 或使用Route 组件，它将通过它。

【参考方案2】：

为了在你的道具中有history，你可以使用withRouter。 更新App.js文件如下：

import  withRouter  from 'react-router'

...

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

【参考方案3】：

请使用https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md，你可以在App.js中渲染组件

 componentWillUpdate(nextProps, nextState) 

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