일반적으로 Redux를 사용하는 경우 반응 라우터를 캡슐화하는 react-router-redux를 사용하는 것이 좋습니다.
앱을 초기화 할 때만 반응 라우터에서 Redux로 두 가지를 전달해야합니다 (Router
및 browserHistory
). app.js에서
:
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
const initialState = {};
const store = configureStore(initialState, browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
const render =() => {
ReactDOM.render(
<Provider store={store}>
<Router
history={history}
routes={rootRoute}
/>
</Provider>,
document.getElementById('app')
);
};
당신은 돌아 오는의 제공자 요소의 자식으로 반응의 라우터 요소를 제공하고, 당신은 또한 라우터 요소에의 반작용 browserHistory의 돌아 오는 래퍼를 제공합니다.
프로젝트의 나머지 부분에서는 React를 직접 호출하는 대신 react-router-redux 만 사용하면됩니다.
react-router-dom BTW는 반응 라우터를 캡슐화하는 React 4에서 단순화의 또 다른 계층이지만 프로젝트 아키텍처가 Redux 인 경우 Redux의 규칙에 따라 작업해야하므로 반응 만 사용하십시오 -router-redux를 사용하여 각 작업의 저장소를 통과합니다 (위에서 언급 한 초기화 제외).