react-router-redux 和 connected-react-router 绑定路由

react-router-redux

import React from "react";
import ReactDOM from "react-dom";

import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";

import createHistory from "history/createBrowserHistory";
import { Route } from "react-router";

import {
  ConnectedRouter,
  routerReducer,
  routerMiddleware,
  push
} from "react-router-redux";

import reducers from "./reducers"; // Or wherever you keep your reducers

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history);

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
);

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))

ReactDOM.render(
  <Provider store={store}>
    {/* ConnectedRouter will use the store from Provider automatically */}
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

按照GitHub里面的react-router-redux库给出的方式绑定路由，出现了一个报错：Cannot read property ‘__reactstandin__key’ of undefined
寻找的源头是在“ConnectedRouter ”组件，出了问题，不知道是哪里要加什么key。而且这个库好像也没怎么更新了。
react-router-redux 传送门

懵逼中…然后寻找了另一种方式结合redux绑定路由 =>connected-react-router

connected-react-router

step1:
首先我们要引入connectRouter并且传递history

// reducers.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
 
export default (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
})

Step 2:
接下来在创建redux store的时候我们首先要创建history对象
然后将history的对象放入createStore
使用routerMiddleware(history) 如果你想 dispatch history actions (e.g. to change URL with push(’/path/to/somewhere’)).

// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()
 
export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        // ... other middlewares ...
      ),
    ),
  )
 
  return store
}

Step 3:
最后用react-roter的ConnectedRouter并且传递history对象作为props

// index.js
...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)
 
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

在根据项目情况，不需要的进行删除简化
connected-react-router 传送门