React-router-dom push

Question

So i'm learning react js thru an ebook and stuck on it,

I keep getting error: "Cannot read property 'push' of undefined.."

my App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect, withRouter } from 'react-router-dom';

import IssueList from './IssueList.jsx';
import IssueEdit from './IssueEdit.jsx';

const contentNode = document.getElementById('contents');
const NoMatch = () =><p>Page Not Found</p>;

const RoutedApp = () => (
<Router>
    <Switch>
        <Route exact path="/" render={ () => <Redirect to="/issues" /> } />
        <Route exact path="/issues" component={withRouter(IssueList)} />
        <Route path="/issues/:id" component={IssueEdit} />
        <Route path="*" component={NoMatch} />
    </Switch>
</Router>
);

ReactDOM.render(<RoutedApp />, contentNode);

if(module.hot){
    module.hot.accept();
}

IssueList.jsx

...
import React from 'react';
import QueryString from 'query-string';
import 'whatwg-fetch';
import { Link } from 'react-router-dom';

...
export default class IssueList extends React.Component{
   constructor(props){
       super(props);
       this.state = { issues: [] };
       this.createIssue = this.createIssue.bind(this);
       this.setFilter = this.setFilter.bind(this);
   }

   setFilter(query){
       this.props.router.push({ pathname: this.props.location.pathname, query });
   }
}

Can somebody tell me what is wrong with it?

See this answer https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Oct 03 '17 at 09:29
@ShubhamKhatri it leads me to another error: "Hash history cannot PUSH the same path..", if I use BrowserRouter it doesn't fire any event nor error in console :/ — Yoga Fishguts, Oct 03 '17 at 10:34
Instead of push use replace if you intend to change the URL query paramters — Shubham Khatri, Oct 03 '17 at 10:36
@ShubhamKhatri how to achieve it? I changed it to this.props.history.replace({ ... }) but nothing happened :/ — Yoga Fishguts, Oct 03 '17 at 12:10
do you mean the query parameters did not change or they changed and you screen did not take any effect — Shubham Khatri, Oct 03 '17 at 12:22
@ShubhamKhatri yes the params doesn't change and browser doesn't navigate to the given query string. does it has anything to do with "Hash history cannot PUSH the same path.."? — Yoga Fishguts, Oct 09 '17 at 03:44

score 0 · Answer 1 · answered Oct 03 '17 at 09:36

You should wrap your component up in react-router to have access to history property. So your IssueList.jsx should look like this:

...
import React from 'react';
import QueryString from 'query-string';
import 'whatwg-fetch';
import { withRouter } from 'react-router'
import { Link } from 'react-router-dom';

...
class IssueList extends React.Component{
   constructor(props){
       super(props);
       this.state = { issues: [] };
       this.createIssue = this.createIssue.bind(this);
       this.setFilter = this.setFilter.bind(this);
   }

   setFilter(query){
       this.props.history.push({ pathname: this.props.location.pathname, query });
   }
}

export default withRouter(IssueList)

this leads me to another error: "Hash history cannot PUSH the same path.." :/ — Yoga Fishguts, Oct 03 '17 at 10:28

score 0 · Accepted Answer · answered Oct 09 '17 at 03:54

Got it to work finally, thanks to this post: How do you programmatically update query params in react-router?

...
import React from 'react';
import QueryString from 'query-string';
import 'whatwg-fetch';
import { Link } from 'react-router-dom';

...
export default class IssueList extends React.Component{
   constructor(props){
       super(props);
       this.state = { issues: [] };
       this.createIssue = this.createIssue.bind(this);
       this.setFilter = this.setFilter.bind(this);
   }

   setFilter(query){
       this.props.history.push({ 
           pathname: this.props.location.pathname, 
           search: '?' + QueryString.stringify(query) 
       });
   }
}

React-router-dom push

2 Answers2