react-redux-react-router v4 url，更新但组件没有答案

【问题标题】：react-redux-react-router v4 url, updates but the component does notreact-redux-react-router v4 url，更新但组件没有
【发布时间】：2017-12-07 18:23:04
【问题描述】：

首先，我几乎通读了我能找到的所有示例，并查看了各种样板文件，以了解其他人是如何做到这一点的。使用 react-router v4 单击<Link> 时，我在加载页面时遇到问题。我还安装了 react-router-connected 包，并且一直在尝试，但没有看到任何改进（但它显示了 redux-logger 中的变化，这很好）。

目前，url 更新得很好，如果我手动更改 url 并按 enter，则将加载下一页。但是，如果我单击链接，它不会重定向。我也在为该项目使用 create-react 应用程序，仅供您参考。我的实际应用程序设置为官方 redux 文档中 usage with react-router 的确切示例。为简单起见，我已将路由更改为仅包含指向基本组件的链接，这些组件除了重定向到彼此之外什么都不做。

包含我的路线的 Root.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router'
// import App from './App';
import NewComponent from './NewComponent';
import OldComponentent from './OldComponent';

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Router>
        <Switch>
          <Route exact path='/' component={OldComponentent}/>
          <Route path='/new' component={NewComponent}/>
          {/* <Route path='/' component={App}/>
          <Route path='/:filter' component={App}/> */}
        </Switch>
      </Router>
    </ConnectedRouter>
  </Provider>
)

export default Root;

首页组件

import React from 'react';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';
import Button from 'material-ui/Button';

class OldComponent extends React.Component {
  redirectPage = () => { this.props.dispatch(push('/new')); };
  redirectPage1 = () => { this.props.dispatch(push('/')); };

  render() {
    return (
      <div>
        OLD COMPONENT
        <Button onClick={this.redirectPage}>Redirect new</Button>
        <Button onClick={this.redirectPage1}>Redirect /</Button>
        <Link to='/new'>Redirect Link</Link>
      </div>
    )
  }
}

export default withRouter(connect()(OldComponent));

其他用于重定向目的的基本组件

import React from 'react';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';
import Button from 'material-ui/Button';

class NewComponent extends React.Component {
  redirectPage = () => { this.props.dispatch(push('/')); };
  redirectPage1 = () => { this.props.dispatch(push('/new')); };

  render() {
    return (
      <div>
        NEW COMPONENT
        <Button onClick={this.redirectPage}>Redirect /</Button>
        <Button onClick={this.redirectPage1}>Redirect new</Button>
        <Link to='/new'>Redirect Link</Link>
      </div>
    )
  }
}

export default withRouter(connect()(NewComponent));

如您所见，它们本质上是相同的组件，但有细微的差别。 url 将更改为 /new or / 并且还将更新在 react-router-connected 包创建的 @@router/LOCATION-CHANGE 状态对象中找到的路径名。通过单击<Link> 标签，网址也会发生变化，但没有重定向。

任何有关如何解决此问题的帮助将不胜感激。

【问题讨论】：

您好，您是否尝试过使用 props.history 而不是 props.dispatch？我是 Reactor Router 4 的新手，但我们的应用正在使用 props.history.push('/someRoute')。
我不敢相信……它奏效了……如此简单。非常感谢。在我在一个更强大的示例中尝试后，我会将您的答案作为解决方案发布。

标签： javascript reactjs redux react-redux react-router-v4

【解决方案1】：

@Supertopoz 发表的评论工作this.props.history.push('/pathname') 工作。但是，在设置之后，<Link> 现在也可以正常工作了。我也一直在使用withRouter（我以前使用过），所以这是让它发挥作用的另一个重要因素。

【讨论】：