I have my entry point index.js
with Router
from react router 5 defined
(not a duplicate of You should not use <Link> outside a <Router>):
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('app'),
);
But I still have the famous You should not use <Link>
outside a <Router>
error on my component using Material UI Popover
:
const InterventionMarker = ({ marker, history }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => setAnchorEl(event.currentTarget);
const handleClose = () => setAnchorEl(null);
const open = Boolean(anchorEl);
return (
<MarkerWithLabel
onClick={handleClick}
...other-props
>
<div>
{marker.label}
<Popover
id={marker.label}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
>
{marker.interventions.map(i =>
<Link history={history} component={RouterLink} to={`/interventions/${i.id}`}>
{i.number} - {i.name}
</Link>
)}
</Popover>
</div>
</MarkerWithLabel>
);
};
export default withRouter(React.memo(InterventionMarker));
I tried to pass history
prop (via withRouter
HOC) to the Popover
component (idea from Using react-router with react portals?).
I tried to add Router
tag to my component but I don't really like this option even if it seems to work.
Any other ideas to enable RouterLink
inside Popover
component ?