47 lines
1.2 KiB
React
47 lines
1.2 KiB
React
import React, { useLayoutEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Router } from 'react-router-dom';
|
|
|
|
import { handleLocationChange } from './actions';
|
|
|
|
function ReduxRouter({ children, history, selector, basename }) {
|
|
const state = useSelector(selector);
|
|
const dispatch = useDispatch();
|
|
|
|
useLayoutEffect(() => {
|
|
const unlisten = history.listen((nextState) => {
|
|
dispatch(handleLocationChange(nextState.location, nextState.action));
|
|
});
|
|
|
|
dispatch(handleLocationChange(history.location, history.action, true));
|
|
|
|
return unlisten;
|
|
}, [history, dispatch]);
|
|
|
|
return (
|
|
<Router
|
|
basename={basename}
|
|
location={state.location}
|
|
navigationType={state.action}
|
|
navigator={history}
|
|
>
|
|
{children}
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
ReduxRouter.propTypes = {
|
|
children: PropTypes.element.isRequired,
|
|
history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
|
selector: PropTypes.func,
|
|
basename: PropTypes.string,
|
|
};
|
|
|
|
ReduxRouter.defaultProps = {
|
|
selector: ({ router }) => router,
|
|
basename: undefined,
|
|
};
|
|
|
|
export default ReduxRouter;
|