6

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 ?

louis amoros
  • 2,418
  • 3
  • 19
  • 40
  • 1
    I think you going to have to manually `push` the new location using `history.push(/interventions/${i.id})` instead of using the built in `Link` component. can you try with a button just for testing ? `````` – Asaf Aviv Aug 05 '19 at 11:25
  • I will go with your solution for now. – louis amoros Aug 05 '19 at 12:40

0 Answers0