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

Question

首先，我已经阅读了我能找到的每个例子，并通过各种样板来查看其他人如何做到这一点。我在使用react-router v4点击<Link>时遇到问题。我还安装了反应路由器连接的包，并且一直在尝试，但没有看到任何改进（但是它显示了redux-logger中的变化，这很好）。

目前，网址更新很好，如果我手动更改网址并按回车键，则会加载下一页。但是，如果我点击链接，它将不会重定向。我也在为项目使用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>标记但不重定向也会更改网址。

如何处理此问题的任何帮助将不胜感激。

Answer 1

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