Menu
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
838
To redirect to another page on button click in React: Use the useNavigate() hook, e.g. const navigate = useNavigate(); . Call the navigate() function, passing it the path - navigate('/about') . The navigate() function lets us navigate programmatically.
In order to do that, I will first import the dependency for react-router-dom . Next, I will import BrowserRouter component from react-router-dom . Then, I will wrap the entire implementation for with AppBar under BrowserRouter . The BrowserRouter uses the HTML5 history API to keep the UI in sync with URL.
The <Switch /> component will only render the first route that matches/includes the path. Once it finds the first route that matches the path, it will not look for any other matches.
Added to your sample as you requested: BrowserRouter, Link.
https://codesandbox.io/s/material-demo-605w9
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
