Javascript 将hashrouter添加到routes使'；推动'；停止渲染组件的步骤

我有一个ConnectedRouter，我想将哈希添加到所有路由，因此我添加了如下HashRouter组件：

// @flow
import React from 'react';

import { Router, Route,Switch } from 'react-router'
import { HashRouter } from 'react-router-dom'
import { ConnectedRouter } from 'react-router-redux';
import { routerActions } from 'react-router-redux';
import { UserAuthWrapper } from 'redux-auth-wrapper';
import StudiesViewContainer from './components/views/studies/StudiesViewContainer';
import NotificationsViewContainer from './components/views/notifications/NotificationsViewContainer';
import UserView from './components/views/user/UserView';
import StudyViewContainer from './components/views/studies/StudyViewContainer';
import { getUser } from './reducers';
import LoginView from './components/views/login';
import NotFoundView from './components/views/notFound';
import ForbiddenView from './components/views/forbidden';

const UserIsAuthenticated = UserAuthWrapper({
  authSelector: getUser,
  redirectAction: routerActions.replace,
  failureRedirectPath: '/',
  wrapperDisplayName: 'UserIsAuthenticated'
});

const configRouter = (history: Object) => {
  return () =>
    <ConnectedRouter history={ history }>
      <HashRouter>
        <Switch>
          <Route path="/studies" component={ StudiesViewContainer } />
          <Route path="/study/:id" component={ StudyViewContainer } />
          <Route path="/user"  component={ UserView } />
          <Route path="/notifications" component={ NotificationsViewContainer } />
          <Route path="/forbidden" component={ ForbiddenView } />
          <Route path="/not-found" component={ NotFoundView } />
          <Route path="/" component={ LoginView } />
          <Route path="*" component={ NotFoundView } />
        </Switch>
      </HashRouter>
    </ConnectedRouter>
};

export default configRouter;

push('studies')

路由不会添加散列，也不会呈现新组件

我已将浏览器历史记录添加到我的应用商店，以下是configureStore文件：

// @flow
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory'
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga'
import {
  persistStore,
  autoRehydrate,
  createTransform
} from 'redux-persist';

import mainSaga from '../sagas';
import reducer from '../reducers';

const history = createHistory();
const routingMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

// Remove error field from persisted auth substate
let authTransform = createTransform(
  (inboundState, key) =>
    key === 'auth' ?
      { ...inboundState, error: undefined }:
      inboundState,
  outboundState => outboundState,
  {
    whitelist: [
      'auth',
      'permissions'
    ]
  }
);

const configureStore = (): Promise<*> => {
  let middlewares = [routingMiddleware,thunk, sagaMiddleware ];
  let composeEnhancers = compose;

  if(process.env.NODE_ENV !== 'production') {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  }

  const store = createStore(
    reducer,
    composeEnhancers(
      applyMiddleware(...middlewares),
      autoRehydrate()));

  sagaMiddleware.run(mainSaga);

  return new Promise(resolve => {
    persistStore(
      store, {
        whitelist: ['auth', 'permissions'],
        debounce: 500,
        transforms: [
          authTransform
        ]
      },
      () => resolve({ store, history })
    );
  });
};

export default configureStore;

我已将浏览器历史记录添加到我的应用商店，以下是configureStore文件：

// @flow
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory'
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga'
import {
  persistStore,
  autoRehydrate,
  createTransform
} from 'redux-persist';

import mainSaga from '../sagas';
import reducer from '../reducers';

const history = createHistory();
const routingMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

// Remove error field from persisted auth substate
let authTransform = createTransform(
  (inboundState, key) =>
    key === 'auth' ?
      { ...inboundState, error: undefined }:
      inboundState,
  outboundState => outboundState,
  {
    whitelist: [
      'auth',
      'permissions'
    ]
  }
);

const configureStore = (): Promise<*> => {
  let middlewares = [routingMiddleware,thunk, sagaMiddleware ];
  let composeEnhancers = compose;

  if(process.env.NODE_ENV !== 'production') {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  }

  const store = createStore(
    reducer,
    composeEnhancers(
      applyMiddleware(...middlewares),
      autoRehydrate()));

  sagaMiddleware.run(mainSaga);

  return new Promise(resolve => {
    persistStore(
      store, {
        whitelist: ['auth', 'permissions'],
        debounce: 500,
        transforms: [
          authTransform
        ]
      },
      () => resolve({ store, history })
    );
  });
};

export default configureStore;

最有可能的问题在于路由器中使用的

历史

-对象和redux状态中提出的对象之间的差异。然后在redux端创建历史

const history=createHistory（），它似乎没有链接到
ConnectedRouter
对象，但后面不能跟假定的代码

如果有效的
history
对象被传递到
ConnectedRouter
，请尝试检查后续路由器操作是否被
saga
进程或其他中间件拦截。尝试通过工具继续执行发射动作流

此外，您还可以尝试执行手动更新，方法是添加具有完整生命周期的根组件（继承自
React.component
class），并在其中添加以下代码：

this.props.history.listen((location, action) => {
  console.log("on route change");
});

然后您可以发现路由器状态是否已更改，若采取了操作，只需在根组件中执行
forceUpdate
方法。另外，请参阅此文档：
我遇到了一个类似的问题，我使用

从'history/createHashHistory导入createHistory

而不是

从“历史记录”/createBrowserHistory导入createHistory

按照中的建议导出组件时，还添加了路由器
您是如何解决这个问题的？我也有同样的问题，我没有使用Redux，但是做了
history.listen（（）=>this.forceUpdate（））
已经解决了这个问题。