React router不会在历史记录更改时呈现新组件

Question

所以基本上，当我尝试从其中一个路由更改路由时，我调用this.props.history.push（'/newPath'）。浏览器url的变化，但是新的路径没有得到匹配（我假设），因为渲染功能的相同组件被调用，没有什么变化。.

指数带路由器的tsx：

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Router, Route } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import history from '../services/history.js';

import rootReducer from '../reducers';

import Browse from './browse';
import ShopItem from './shop-item';

import * as Styles from './index.scss';

const BrowserContainer = () => {
  const initialState: any = {
    items: window.preloadedData.items || []
  };
  const middlewares = [thunk];
  const store = createStore(rootReducer, initialState, 
applyMiddleware(...middlewares));

  return (
    <Provider store={ store }>
      <Router history={ history }>
        <div className={ Styles['container'] }>
          <Route exact path="/item/:id" component={ ShopItem } />
          <Route exact path="/home" component={ Browse } />
        </div>
      </Router>
    </Provider>
  );
};

ReactDOM.render(
  <BrowserContainer />,
  document.getElementById("root")
);

我尝试从中导航的组件使用connect函数连接到redux存储。我曾尝试将其包装到withRouter（）HOC中并删除连接，但没有成功。我正在调用以更改路线的函数：

getItemAndNavigate(id: string) {
  this.props.history.push(`/item/${id}`);
}

版本：“历史记录”：“^4.7.2”，“反应路由器dom”：“^4.2.2”

Answer 1

你需要使用这个。上下文路由器。历史按。在Chrome中检查调试器。他们升级到了版本4。这是对以前版本的完全重写。如果你需要更多的帮助，请告诉我。设置断点以查看返回的内容。此外，

编辑：我犯了一个错误，使用了这个。道具。路由器。历史记录，它应该使用上下文并使用BrowserContainer。contextTypes={router:PropTypes.object}；