javascript - Adding hashrouter to routes makes 'push' to stop render components - Stack Overflow

admin管理员组

文章数量:1341686

I have a ConnectedRouter to which I wanted to add hashes to all the routes so I added the HashRouter ponent like this:

// @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 './ponents/views/studies/StudiesViewContainer';
import NotificationsViewContainer from './ponents/views/notifications/NotificationsViewContainer';
import UserView from './ponents/views/user/UserView';
import StudyViewContainer from './ponents/views/studies/StudyViewContainer';
import { getUser } from './reducers';
import LoginView from './ponents/views/login';
import NotFoundView from './ponents/views/notFound';
import ForbiddenView from './ponents/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" ponent={ StudiesViewContainer } />
          <Route path="/study/:id" ponent={ StudyViewContainer } />
          <Route path="/user"  ponent={ UserView } />
          <Route path="/notifications" ponent={ NotificationsViewContainer } />
          <Route path="/forbidden" ponent={ ForbiddenView } />
          <Route path="/not-found" ponent={ NotFoundView } />
          <Route path="/" ponent={ LoginView } />
          <Route path="*" ponent={ NotFoundView } />
        </Switch>
      </HashRouter>
    </ConnectedRouter>
};

export default configRouter;

The problem is that when I do something like this:

push('studies')

The route does not add the hash and the new ponents are not rendered.

I added the browser history to my store, here is the configureStore file:

// @flow
import { createStore, applyMiddleware, pose } 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 poseEnhancers = pose;

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

  const store = createStore(
    reducer,
    poseEnhancers(
      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;

Can anyone help me get the push working as expected?

I am using the following versions of router in package json:

"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "next",

I have a ConnectedRouter to which I wanted to add hashes to all the routes so I added the HashRouter ponent like this:

// @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 './ponents/views/studies/StudiesViewContainer';
import NotificationsViewContainer from './ponents/views/notifications/NotificationsViewContainer';
import UserView from './ponents/views/user/UserView';
import StudyViewContainer from './ponents/views/studies/StudyViewContainer';
import { getUser } from './reducers';
import LoginView from './ponents/views/login';
import NotFoundView from './ponents/views/notFound';
import ForbiddenView from './ponents/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" ponent={ StudiesViewContainer } />
          <Route path="/study/:id" ponent={ StudyViewContainer } />
          <Route path="/user"  ponent={ UserView } />
          <Route path="/notifications" ponent={ NotificationsViewContainer } />
          <Route path="/forbidden" ponent={ ForbiddenView } />
          <Route path="/not-found" ponent={ NotFoundView } />
          <Route path="/" ponent={ LoginView } />
          <Route path="*" ponent={ NotFoundView } />
        </Switch>
      </HashRouter>
    </ConnectedRouter>
};

export default configRouter;

The problem is that when I do something like this:

push('studies')

The route does not add the hash and the new ponents are not rendered.

I added the browser history to my store, here is the configureStore file:

// @flow
import { createStore, applyMiddleware, pose } 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 poseEnhancers = pose;

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

  const store = createStore(
    reducer,
    poseEnhancers(
      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;

Can anyone help me get the push working as expected?

I am using the following versions of router in package json:

"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "next",

• javascript
• reactjs
• redux
• react-router

Share Follow asked Nov 16, 2017 at 18:55 Pablo EstradaPablo Estrada 3,48244 gold badges3434 silver badges8383 bronze badges 1

• how did you solve this? I have the same issue – Pablo Alejandro Commented Oct 5, 2018 at 14:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

I had a similar problem, I solved it by using

import createHistory from 'history/createHashHistory'

instead of

import createHistory from 'history/createBrowserHistory'

Also added withRouter when exporting ponents as suggested in https://github./ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

I added the browser history to my store, here is the configureStore file:

Most likely that issue lies on difference between history-object, used in router, and proposed in redux state. Then history created in redux side const history = createHistory();, it seems that it had not linked with ConnectedRouter object, but it can't be followed by supposed code.

If valid history object is passed to ConnectedRouter, try to check that subsequent router actions are to intercepted with saga process or other middleware. Try to follow on emitting actions flow by https://github./gaearon/redux-devtools tool.

Also you can try to perform manual updating, by adding root ponent with full lifecycle (Inherited from React.Component class), and add there following code:

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

Then you can discover had router state been changed, and if action is taken, just perform forceUpdate method in root ponent. Also consult this documentation: https://github./ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

本文标签： javascriptAdding hashrouter to routes makes 39push39 to stop render componentsStack Overflow