How to use React Router with Material UI Drawer to change content on click?

Question

I've tried using Component={Link} to={path} but that just changes the URL. The content is displayed inside main and I've used Routes inside there like so:

<main>
  <Switch>
    <Route path={..} component={..}>
    .
    .
    .
  </Switch>
</main

But this doesn't work, the content doesn't change

Link to material UI example: https://codesandbox.io/s/v66pl

Nebulous

Do you mean to this: #57223730 – Clematis

@Oleg this is what I'm doing right now, but I don't think it's a good way plus it causes page to refresh right? I'd like it to do it via routes, not by manipulating state and conditional rendering – Nebulous

Look at very similar sample with tabs: codesandbox.io/s/l4yo482pll – Clematis

@Oleg that's what I mentioned in the question description, that doesn't work. Could you try implementing it on the material UI codesandbox example? – Nebulous

Answer 1

Added to your sample as you requested: BrowserRouter, Link.

https://codesandbox.io/s/material-demo-605w9

Clematis

Excellent, thanks! Turns out the problem was I was importing Switch and Route from react-router-dom/umd instead of react-router-dom – Nebulous