反应路由器 dom 推送
Posted
技术标签:
【中文标题】反应路由器 dom 推送【英文标题】:React-router-dom push 【发布时间】: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 );
谁能告诉我这有什么问题?
【问题讨论】:
看到这个答案***.com/questions/44127739/… @ShubhamKhatri 它导致我出现另一个错误:“哈希历史记录无法推送相同的路径..”,如果我使用 BrowserRouter 它不会触发任何事件或控制台中的错误:/ 如果您打算更改 URL 查询参数,请使用替换代替推送 @ShubhamKhatri 如何实现呢?我将其更改为 this.props.history.replace( ... ) 但什么也没发生:/ 你的意思是查询参数没有改变还是改变了你的screen没有生效 【参考方案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)
);
【讨论】:
以上是关于反应路由器 dom 推送的主要内容,如果未能解决你的问题,请参考以下文章