每当 redux 状态发生变化时，React-Router Switch 都会导致当前路由重新挂载

Question

我正在使用 React-Router v4。但是，每当我的应用程序 Redux 状态更新时，React-Router 的 Switch 组件都会更新并重新安装当前路由。

我在主 index.js 文件中定义我的 HashRouter，如下所示：

/* global document */

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import App from './screens/app/index'
import registerServiceWorker from './registerServiceWorker'

import './styles/main.css'

import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>,
  document.getElementById('root'),
)
registerServiceWorker()

这是我使用 Switch 组件的组件：

import PropTypes from 'prop-types'
import React from 'react'
import { Route, Switch } from 'react-router-dom'

const propTypes = {
  routes: PropTypes.arrayOf(PropTypes.shape({
    path: PropTypes.string,
    name: PropTypes.string,
    container: PropTypes.object,
    exact: PropTypes.bool,
  })).isRequired,
}

const Router = ({ routes }) => (
  <Switch>
    <div className="container">
      {routes.map(route => (
        <Route
          key={route.path}
          path={route.path}
          exact={route.exact}
          component={() => route.container}
        />
      ))}
    </div>
  </Switch>
)

Router.propTypes = propTypes

export default Router

最后，我在这里开店：

import { createStore } from 'redux'

import reducer from './reducers/index'

export default createStore(reducer)

我认为可能的问题可能是：

我的 Redux 设置存在问题，导致与 redux 存储发生冲突
路由定义不正确

Answer 1

我怀疑这是每次重新挂载组件的行

component={() => route.container}

尝试

const Router = ({ routes }) => (
  <Switch>
   <div className="container">
     {routes.map(route => {
       const routerComp = () => route.container 
       return (
         <Route
          key={route.path}
          path={route.path}
          exact={route.exact}
          component={routerComp}
        />
       )
     })}
</div>

)

每当 redux 状态发生变化时，React-Router Switch 都会导致当前路由重新挂载

React-Router Switch causing the current route to re-mount whenever redux state changes

react-router

redux

react-redux

react-router-v4

react-router-dom