React 路由器不会在历史更改时呈现新组件

Question

所以基本上，当我尝试从其中一条路线更改路线时，我正在调用 this.props.history.push('/newPath')。浏览器 url 发生变化，但是新路径不匹配（我假设），因为相同组件的渲染函数被调用并且没有任何变化..

index.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")
);

我尝试从中导航的组件已使用连接功能连接到 redux 存储。我尝试将其包装到 withRouter() HOC 中并完全删除连接，但没有成功。我调用的功能是更改路线：

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

版本： "history": "^4.7.2", "react-router-dom": "^4.2.2"

Answer 1

您需要使用 this.context.router.history.push。在 Chrome 中检查你的调试器。他们升级到版本 4。它完全重写了以前的版本。如果您需要更多帮助，请告诉我。设置断点以查看返回的内容。此外，<Router> 现在是 <BrowserRouter>。你不再需要历史了。

编辑： 我犯了一个错误并使用 this.props.router.history，它应该使用 context 并使用 BrowserContainer.contextTypes = {router: PropTypes.object};

React 路由器不会在历史更改时呈现新组件

React router does not render new component on history change

history

reactjs

react-router

redux

react-router-dom