Redux 라우터 pushState 함수가 URL 변경을 트리거하지 않음

Question

예를 들어 here을 따라 가며 기본 인증 영역 인 을 만들었습니다. 이는 내 원칙에 대해 정말 좋아하는 해결책입니다.

const store = createStore(reducer); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
     <IndexRedirect to="authenticated" /> 
      <Route path="setup" component={SetupJourney} > 
      <Route path="details" component={Details}/> 
      <Route path="account" component={AccountType}/> 
      </Route> 
      <Route path="authenticated" component={requireAuthentication(secretPage)} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

다음 여기에 리디렉션 처리하기 위해 내 AuthenticatedComponent 고차원의 구성 요소입니다 : 여기 내 index.js입니다

export function requireAuthentication(Component) { 

class AuthenticatedComponent extends React.Component { 

    componentWillMount() { 
     this.checkAuth(); 
    } 

    componentWillReceiveProps(nextProps) { 
     this.checkAuth(); 
    } 

    checkAuth() { 
     if (!this.props.isAuthenticated) { 
      this.props.dispatch(pushState(null, '/setup/details', '')); 
     } 
    } 

    render() { 
     return (
      <div> 
       {this.props.isAuthenticated === true 
        ? <Component {...this.props}/> 
        : null 
       } 
      </div> 
     ) 

    } 
} 

const mapStateToProps = (state) => ({ 
    isAuthenticated: state.get('user').get('isAuthenticated') 
}); 

return connect(mapStateToProps)(AuthenticatedComponent); 

} 

내가 연령대에 이것에 대해 놀았 던을 내가 리디렉션 구성 요소를 얻을 수 없다 . Redux dev 도구에서 나는 @@reduxReactRouter/historyAPI 액션이 해고되었음을 알 수 있지만, URL은 변하지 않습니다. 모든 관련 소도구/주 등이 너무 자리에있는 것처럼 보입니다 ... 내가 놓친 부분이 있습니까?

감사

이 건너 오는 사람들을위한

Answer 1

, 나는 결국이 문제를 해결하고 몇 가지 문제가 있었다. 첫째, pushState는 browserHistory에서만 사용하기 때문에 hashHistory에서 전환해야했습니다.

이 후에도 pushState가 작동하지 않습니다. 미들웨어가 잘못된 순서로 지정된 경우 apparently happen 수 있습니다. 내 index.js을 Redux의 real world example의 패턴을 따르도록 재구성했으며, 결국 모든 것이 작동했습니다.

import { createStore, applyMiddleware, combineReducers, compose } from 'redux'; 
import { routerReducer, routerMiddleware} from 'react-router-redux'; 
import { browserHistory } from 'react-router'; 
import reducer, { INITIAL_STATE } from '../reducers/reducer'; 

const rootReducer = combineReducers({reducer, routing: routerReducer}); 
const composeEnhancers = 
process.env.NODE_ENV !== 'production' && 
typeof window === 'object' && 
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? 
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ 
    }) : compose; 

const enhancer = composeEnhancers(
    applyMiddleware(routerMiddleware(browserHistory)) 
); 

const initialState = {'reducer': INITIAL_STATE}; 

export default function configureStore() { 
    return createStore(rootReducer, initialState, enhancer); 
} 

:

핵심 비트는 지금과 같이 보이는 store.js 파일이됩니다