const MainLayout = () => { const classes = useStyles(); return ( <div className={classes.root}> <TopBar /> <div className={classes.wrapper}> <div className={classes.contentContainer}> <div className={classes.content}> <Outlet /> </div> </div> </div> </div> ); }
const DashboardLayout = () => { const classes = useStyles(); const [isMobileNavOpen, setMobileNavOpen] = useState(false); return ( <div className={classes.root}> <TopBar onMobileNavOpen={() => setMobileNavOpen(true)} /> <NavBar onMobileClose={() => setMobileNavOpen(false)} openMobile={isMobileNavOpen} /> <div className={classes.wrapper}> <div className={classes.contentContainer}> <div className={classes.content}> <Outlet /> </div> </div> </div> </div> ); }
function Posts() { return ( <div style={{ padding: 20 }}> <h2>博客:</h2> {/* 渲染任何匹配的子级 */} <Outlet /> </div> ); }