¿Puede explicar cómo hago que mis rutas funcionen con las pestañas MUI? Como no escribo mi código de esta manera y no uso MUI muy a menudo, no entiendo cómo hacerlo funcionar. alguna idea por favor?
Este es mi componente NavBar.js:
const NavBar = props => { const [value, setValue] = useState(0); const handleChange = (_e, newValue) => { setValue(newValue); }; return ( <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}> <Tabs value={value} onChange={handleChange} aria-label="Navigation" indicatorColor="primary" textColor="primary" > <Tab label="Home" index={0} /> <Tab label="Favorites" index={1} /> </Tabs> </AppBar> ); };Y mi componente AppRouter.js
const AppRouter = () => { return ( <ThemeProvider> <Router> <NavBar /> <Switch> <Route exact path="/" component={Home} /> </Switch> </Router> </ThemeProvider> ); };¿Intentó agregar el enrutamiento codificado de handleChange , como history.push basado en el valor? No estoy seguro de si es lo que quieres.
Ok, entonces encontré la solución. En mi AppRouter.js obtuve esto:
import React from "react"; import { HashRouter as Router, Switch, Route } from "react-router-dom"; import { Home, Favorites } from "pages"; import { ThemeProvider } from "theme"; import NavBar from "components/NavBar"; const AppRouter = () => { return ( <ThemeProvider> <Router> <NavBar /> <Switch> <Route exact path="/favorites" component={Favorites} /> <Route exact path="/" component={Home} /> </Switch> </Router> </ThemeProvider> ); }; export default AppRouter;y en mi NavBar.js agregué esto y me permite cambiar entre ellos:
import React, { useState } from "react"; import { AppBar, Tabs, Tab } from "@material-ui/core"; import { Home, Favorites } from "pages"; import { Route, BrowserRouter, Switch, Link } from "react-router-dom"; const NavBar = props => { const [value, setValue] = useState(0); const handleChange = (_e, newValue) => { setValue(newValue); }; return ( <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}> <Tabs value={value} onChange={handleChange} aria-label="Navigation" indicatorColor="primary" textColor="primary" > <Tab label="Home" index={0} component={Link} to={"/"} /> <Tab label="Favorites" index={1} component={Link} to={"/favorites"} /> </Tabs> </AppBar> ); }; export default NavBar;el problema al que me enfrento ahora es que por alguna razón pierdo mi almacenamiento local y cambio mi ruta