no this.props inside handleSubmit() in react

Question

I have looked over the other questions and none of the answers seem to help. I do not have redux-form installed. I am brand new to react (and pretty new to dev as well)

In my App.js I am importing:

 import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom' 

 class App extends Component { render() { return ( <Router> <div className="App"> <nav className="uk-navbar fixed"> ... </nav> <Switch> <Route exact path = "/" component={Home}/> <Route path = "/tasks/new" component={AddTask}/> ... more routes </Route> </Switch> </div> </Router> ); } } export default App; 

All my forms (total of 3) have a handleOnSubmit, which I have as an arrow function:

  handleOnSubmit = (event) => { event.preventDefault() apiRequest.post(`projects/`, this.state) this.props.router.push('/client'); } 

Being call from the form:

 <form className="uk-form" onSubmit={this.handleOnSubmit}> 

And, I do not have this.props inside my handleOnSubmit, so I cannot reroute the user.

Here is the full error:

 TypeError: Cannot read property 'push' of undefined AddProject._this.handleOnSubmit src/components/projects/AddProject.js:20 17 | handleOnSubmit = (event) => { 18 | event.preventDefault() 19 | apiRequest.post(`projects/`, this.state) > 20 | this.props.router.push('/client'); 21 | } 22 | 23 | handleOnChange = event => { View compiled ▼ 14 stack frames were expanded. Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback node_modules/react-dom/lib/ReactErrorUtils.js:69 executeDispatch node_modules/react-dom/lib/EventPluginUtils.js:85 Object.executeDispatchesInOrder node_modules/react-dom/lib/EventPluginUtils.js:108 executeDispatchesAndRelease node_modules/react-dom/lib/EventPluginHub.js:43 executeDispatchesAndReleaseTopLevel node_modules/react-dom/lib/EventPluginHub.js:54 forEachAccumulated node_modules/react-dom/lib/forEachAccumulated.js:24 Object.processEventQueue node_modules/react-dom/lib/EventPluginHub.js:254 runEventQueueInBatch node_modules/react-dom/lib/ReactEventEmitterMixin.js:17 Object.handleTopLevel [as _handleTopLevel] node_modules/react-dom/lib/ReactEventEmitterMixin.js:27 handleTopLevelImpl node_modules/react-dom/lib/ReactEventListener.js:72 ReactDefaultBatchingStrategyTransaction.perform node_modules/react-dom/lib/Transaction.js:143 Object.batchedUpdates node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62 Object.batchedUpdates node_modules/react-dom/lib/ReactUpdates.js:97 dispatchEvent node_modules/react-dom/lib/ReactEventListener.js:147 ▲ 14 stack frames were expanded. 

Any help is greatly appreciated. Thanks so much!

I have super(), and both this.props.router.push and this.props.router.history don't work.

this.props doesn't work at all in the function.

Here is my whole component -- thanks so much again!

 import React, { Component } from 'react' import apiRequest from '../../redux/modules/apiRequests' export default class AddProject extends Component { constructor(props){ super(props) this.state = { name: '', bill_rate: '', clientId: this.props.clientId } } handleOnSubmit = (event) => { event.preventDefault() apiRequest.post(`projects/`, this.state) this.props.router.push('/client'); } handleOnChange = event => { this.setState({ [event.target.name]: event.target.value }); } render() { return ( <div> <form className="uk-form" onSubmit={this.handleOnSubmit}> <fieldset> <legend>Add Project</legend> <div className="uk-form-row"> <legend>Project Name</legend> <input type="text" placeholder="Project Name" name="name" onChange={this.handleOnChange} /> </div> <div className="uk-form-row"> <legend>Project Bill Rate</legend> <input type="text" placeholder="Project Bill Rate" name="bill_rate" onChange={this.handleOnChange} /> </div> <input type="hidden" name={this.props.clientID} /> <input type="submit" value="Add Project" /> </fieldset> </form> </div> ); } }; 

Answer 1

我认为您只需要用this.props.history.push()替换this.props.router.push

Answer 2

This is not a direct answer to your error but React Router v4 has a declarative alternative:

import {Redirect} from 'react-router-dom';

// in render function
this.state.shouldRedirect ? <Redirect to="redirect-url"/> : null

// in method or somewhere else (lifecycle hooks etc)
this.setState({shouldRedirect: true});

As soon as Redirect is rendered, you'll get redirected.

Answer 3

You need to add constructor

constructor(props){
super(props);
}

Edit: Add this

App.contextTypes = {
  router: PropTypes.object,
};

Then instead of this.props.router.push() try

this.context.router.push()