历史记录.在React路由器内部无法正常工作

Question

我希望每次识别URL发生变化时都能调用函数，但是在历史记录上遇到麻烦。Listen不发射(Console.log永远不会打印(。我看过帖子说这是因为我正在使用browserrouter，但是每当我尝试从React-Router中导入任何内容时，我都会遇到"无法在React-Router中找到X"。我目前有React-Router和React-Router-Dom版本4.1.2

app.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { BrowserRouter, Route, Redirect, Link } from 'react-router-dom';
import './App.css';
import reducers from './common/reducers'
import Routes from './common/Routes';
import RoutesWrapper from './components/RoutesWrapper';
import Login from './Login';
class App extends Component {
    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <Login>
                        <div className="App">
                            <div className="widgetCont">
                                <Routes wrapper={RoutesWrapper}/>
                            </div>
                        </div>
                    </Login>
                </BrowserRouter>
            </Provider>
        );
    }
}
export default App;
export { Route, Redirect, Link };

routes.js

import React, { Component } from 'react';
import createHistory from 'history/createBrowserHistory';
import { Route } from '../App.js';
import PredictionsCompletedContainer from './containers/PredictionsCompletedContainer';
import GameContainer from './containers/GameContainer';
class Routes extends Component {

    render() {
        const Wrapper = this.props.wrapper;
        const history = createHistory();
        history.listen((location, action) => {
            console.log("inside history listen");
        });
        return (
            <Wrapper>
                <Route exact path="/" component={GameContainer}/>
                <Route path="/predictions-completed" component={PredictionsCompletedContainer}/>
            </Wrapper>
        );
    }
}
export default Routes;

Answer 1

随着每次重新渲染组件，渲染都被调用。

它引起的，在您初始化history对象时，侦听器被删除。

更好，将其放入组件生命周期componentDidMount中，该生命只会在生活中呼唤一次。

componentDidMount(){
    const history = createHistory();
        history.listen((location, action) => {
            console.log("inside history listen");
        });
}

编辑：

看起来，您需要集成 react-router-redux 。

请参阅 answer here 。