@mui/lab offers utility components that inject props to implement accessible tabs following WAI-ARIA Authoring Practices. document
I am using mui lab tabs
.
const tabs = [
{value: "/", label: "home"},
{value: "/hot-hub", label: "hot hub post"},
{value: "/source", label: "Source"},
{value: "/article", label: "artcile"}
]
const MobileMain = memo(({}: Props) => {
const navigate = useNavigate()
const location = useLocation()
const tabPanelSX = {height: "100%", padding: 0}
return (
<div className="h-full flex flex-col">
<TabContext value={location.pathname}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={(e, value) => {
navigate(value)
}}
>
{
tabs.map(tab => <Tab key={tab.value} value={tab.value} label={tab.label}/>)
}
</TabList>
</Box>
{
tabs.map(tab => <TabPanel key={tab.value} value={tab.value} sx={tabPanelSX}><Outlet/></TabPanel>)
}
</TabContext>
</div>
)
})
I want to use <ScrollRestoration />
to save the scroll position. But I don’t know where should I put <ScrollRestoration />
? what’s is root route?
You should only render one of these and it’s recommended you render it in the root route of your app. document
<code>import { ScrollRestoration } from "react-router-dom";function RootRouteComponent() {return (<div>{/* ... */}<ScrollRestoration /></div>);}</code><code>import { ScrollRestoration } from "react-router-dom"; function RootRouteComponent() { return ( <div> {/* ... */} <ScrollRestoration /> </div> ); } </code>import { ScrollRestoration } from "react-router-dom"; function RootRouteComponent() { return ( <div> {/* ... */} <ScrollRestoration /> </div> ); }
I hope that when the user switches to tab B and then switches back to tab A, the scroll position of tab A remains unchanged.
what should I do?