反应路由器 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 推送的主要内容,如果未能解决你的问题,请参考以下文章

将路由器 dom 路由反应到 ItemDetail

反应路由器dom v5默认路由不起作用

javascript 反应路由器Dom

为啥在部署我的项目后卡住/空白页面?反应路由器 Dom |参数

反应路由器 dom 将活动类设置为 NavLink

路由器道具和自定义道具与打字稿反应路由器dom用于功能组件