I'm having a form onsubmit it must route to list.js . how do I route to list.js to show all articles on click of add articles button wheni get the following error
TypeError: Cannot read property 'history' of undefined
ConnectedForm.handleSubmit
E:/reacr-redux/src/components/Form.js:31
28 | const id = uuidvl();
29 | this.props.addArticle({ title , id });
30 | this.setState({title:''});
> 31 | this.props.router.history.push('/List');
| ^ 32 | }
33 | render(){
34 | const {title}=this.state;
View compiled
▶ 18 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
components/form.js
import React ,{ Component } from 'react';
import {connect} from 'react-redux';
import uuidvl from 'uuid';
import { addArticle } from '../js/actions/index';
import PropTypes from 'prop-types';
const mapDispatchtoProps= dispatch=>{
return{
addArticle:article =>dispatch(addArticle(article))
};};
class ConnectedForm extends Component{
constructor(){
super();
this.state={
title:''
} }
static contextTypes={
router:PropTypes.object,
}
handleChange(eVal,nm){
this.setState({"title":eVal})
}
handleSubmit(ev){
ev.preventDefault();
const { title }=this.state;
const id = uuidvl();
this.props.addArticle({ title , id });
this.setState({title:''});
this.props.router.history.push('/List');
}
render(){
const {title}=this.state;
return(
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<input type='text' value={title} id="title" onChange={(e)=>this.handleChange(e.target.value,'article')}/>
<button type="submit">Add</button>
</form>
</div>
);} }
const Form =connect(null,mapDispatchtoProps)(ConnectedForm);
export default Form;
src/index
import index from "./js/index";
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './js/store/index';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router , Route , Switch } from 'react-router-dom';
import Form from './components/Form';
import List from './components/List';
import Userdashboard from './components/unimoniC/Userdashboard';
render(
<Provider store={store}>
<Router>
<Switch>
<Route exact path="/" component={App}/>
<Route path="/Form" component={Form}/>
<Route path="/List" component={List}/>
<Route path="/Userdashboard" component={Userdashboard}/>
</Switch>
</Router>
</Provider>
, document.getElementById('root'))
serviceWorker.unregister();
Should I use react redux router as I'm using react router dom do I need to install some plugin or withrouter. I have no idea. Can anyone lemme know where I'm going wrong?
