React 学习笔记 16 （将路由状态同步到store）

1.首先安装插件

npm install connected-react-router

2.修改store/reducers/index.ts

import { connectRouter } from "connected-react-router";
import { History } from "history";
import { combineReducers } from "redux";
import testReducer from "./test.reducer";

const createRootReducer = (history: History) => combineReducers({
    test: testReducer,
    router: connectRouter(history)
})
export default createRootReducer

3.修改store/index.ts

import { routerMiddleware } from "connected-react-router";
import { createHashHistory } from "history";
import { applyMiddleware, createStore } from "redux";
import createRootReducer from "./reducers";

export const history = createHashHistory()

const store = createStore(
    createRootReducer(history),
    applyMiddleware(routerMiddleware(history)))

export default store

4.修改根路径下的index.ts

import React from "react"
import ReactDOM from "react-dom"
import Routes from "./Routes"
import "./style.css"
import { API } from './config'
import { Provider } from 'react-redux'
import store from './store'
import { ConnectedRouter } from "connected-react-router"
import { history } from './store'

console.log(API)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>

  ,
  document.getElementById("root")
)