0
92
ViewsLa URL no cambia constantemente en el enrutador React
Obtengo un comportamiento extraño al usar @reach/router . Mi objetivo es tener una página con pestañas. Cuando hago clic en una pestaña, la URL cambia y la página cambia (aunque no recarga toda la página). He estado usando chakra ui ya que hace que el tema sea más fácil para mí.
El comportamiento que obtengo es extraño. A veces, la URL cambia cuando cambio de pestaña. Funciona muy bien. Luego, a veces, la URL no cambia, aunque he cambiado de pestaña.
Mi proyecto se encuentra aquí
import React from "react"; import { Router, Link } from "@reach/router"; import { Tab, Tabs, TabList, TabPanel, TabPanels, useColorModeValue } from "@chakra-ui/react"; import Somatic from "../pages/somatic"; import Ef from "../pages/executive_functions_coaching"; import Intro from "../pages/home"; function ConceptTabs(props) { const [tabIndex, setTabIndex] = React.useState(0); return ( <> <Tabs size="lg" isFitted variant="soft-rounded" colorScheme="yellow" onChange={(index) => { setTabIndex(index); }} > <TabList> <Tab> <Link to="/"> Tab1 </Link> </Tab> <Tab> <Link to="/executive_functions_coaching/"> Tab2 </Link> </Tab> <Tab> <Link to="/somatics/"> Tab3 </Link> </Tab> </TabList> <TabPanels p="2rem"> <TabPanel> <Router> <Intro path='/' /> </Router> </TabPanel> <TabPanel> <Router> <Ef path='/executive_functions_coaching/' /> </Router> </TabPanel> <TabPanel> <Router> <Somatic path='/somatics/' /> </ Router> </TabPanel> </TabPanels> </Tabs> </> ); } export default ConceptTabs; Intenté usar <NavLink> pero tuve problemas similares. Soy bastante nuevo en el enrutamiento, pero he logrado que esto funcione sin las pestañas. Me pregunto si hay una manera de hacer que el enrutador funcione con pestañas.
3 answers
Answer question0
Parece extraño que esté mezclando reach-router y react-router-dom , es el sucesor, pero la raíz de su problema con las pestañas es que cada componente de la Tab representa un Link , pero la pestaña completa no es responsable de la navegación.
Solo la parte de texto en el medio de cada pestaña/botón es el enlace real , por lo que la navegación solo funciona si hace clic con precisión en la parte de texto de cada pestaña que es el enlace.
Para resolverlo, puede representar cada componente de Tab como un componente de Link .
El componente as prop y custom
<TabList> <Tab as={Link} to="/"> tab1 </Tab> <Tab as={Link} to="/executive_functions_coaching/"> tab </Tab> <Tab as={Link} to="/somatics/"> tab3 </Tab> </TabList> 
0
Vea las siguientes 2 capturas de pantalla.
Como puede ver, la etiqueta 'a' está en una etiqueta 'botón'. El tamaño real de "a" es muy pequeño. Si puede hacer clic en la pestaña 1, se produce mediante el botón. Entonces, por favor, la respuesta de Drew Reese se adapta a ti. Gracias.
0
Lo que podría hacer es agregar onClick={()=>history.push('/route')} en sus pestañas.
Aquí es cómo inicializar la history :
improt { useHistory } from 'react-router-dom'; // inside your component: history = useHistory();