Material UI Tabs with routes - reactjs

Question

So I'm using Material UI Tabs, and I'm trying when a user taps on tab it redirects him to a tab with a link but it would be still in the same main page
Example of what i'm looking for please notice the link changes as the tabs changes:
Material UI VerticalTabs
import * as React from 'react';
import PropTypes from 'prop-types';
import Tabs from '#mui/material/Tabs';
import Tab from '#mui/material/Tab';
import Typography from '#mui/material/Typography';
import Box from '#mui/material/Box';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`vertical-tabpanel-${index}`}
aria-labelledby={`vertical-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
};
function a11yProps(index) {
return {
id: `vertical-tab-${index}`,
'aria-controls': `vertical-tabpanel-${index}`,
};
}
export default function VerticalTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box
sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}
>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
sx={{ borderRight: 1, borderColor: 'divider' }}
>
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</Box>
);
}
I know that I have to use react-router-dom but I didn't know how to implement, any help would be appreciated.

Answer 1

Create a route component or destructive the routes in App.js. Just install react-router-dom and use BrowserRouter as Route as the Parent tag. Then add routes and structure your routes for your pages there.
import {BrowserRouter as Router, Routes, Route} from 'react-route-dom'
<Router>
<Routes>
<Route path='/pageName' element={<pageName/>}>
<Route path='/pageName2' element={<pageName2/>}>
</Routes>
</Router>
Also refer react router v6 docs. This playlist would helpful to using different routing mechanism. In your case you need to watch the tutorial 8 to do the nested routes. If you're a person who familiar with v5 and want to know the changes in v6, then refer this video also.