反应路由器 dom 推送答案

【问题标题】：React-router-dom push反应路由器 dom 推送
【发布时间】：2018-03-14 10:59:30
【问题描述】：

所以我正在通过电子书学习 react js 并坚持下去，

我不断收到错误消息：“无法读取未定义的属性 'push'..”

我的 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();
}

问题列表.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 });
   }
}

谁能告诉我这有什么问题？

【问题讨论】：

看到这个答案stackoverflow.com/questions/44127739/…
@ShubhamKhatri 它导致我出现另一个错误：“哈希历史记录无法推送相同的路径..”，如果我使用 BrowserRouter 它不会触发任何事件或控制台中的错误：/
如果您打算更改 URL 查询参数，请使用替换代替推送
@ShubhamKhatri 如何实现呢？我将其更改为 this.props.history.replace({ ... }) 但什么也没发生：/
你的意思是查询参数没有改变还是改变了你的screen没有生效

标签： reactjs react-router-dom

【解决方案1】：

您应该将组件包装在 react-router 中以访问历史属性。所以你的IssueList.jsx 应该是这样的：

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

【讨论】：

这导致我出现另一个错误：“哈希历史无法推送相同的路径..”：/

【解决方案2】：

终于搞定了，感谢这篇文章： 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) 
       });
   }
}

【讨论】：