CODEWITHSUNDEEP
javascriptreactjsreach-router
Katie Melosto
Katie Melosto

Reputation: 1177

URL not changing consistently in React router

I'm getting odd behavior using @reach/router. My aim is to have a page with tabs. When I click on a tab the url changes and the page changes (though it doesn't reload the whole page). I've been using chakra ui since it makes the theme making easier for me.

The behavior I get is odd. Sometimes the URL changes as I switch between tabs. It works great. Then sometimes the URL doesn't change, even though I've switched tabs.

My project is located here

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;

I've tried to use <NavLink> but had similar issues. I'm quite new to routing, but I've gotten this to work without the tabs. I'm wondering if there's a way to get the router to work with tabs?

Upvotes: 4

Views: 1234

Answers (3)

Moussa Bistami
Moussa Bistami

Reputation: 1087

What you could do is to add onClick={()=>history.push('/route')} on your tabs.

Here is how to initialize history:

improt { useHistory } from 'react-router-dom';
// inside your component:
history = useHistory();

Upvotes: 2

genius dev
genius dev

Reputation: 143

See as following 2 screenshots.

enter image description here

enter image description here

As you can see, 'a' tag is in a 'button' tag. Real size of "a" is very small. If you might click tab1, it is occured by button. So, Please, Drew Reese's answer is fit you. Thanks.

Upvotes: 2

Drew Reese
Drew Reese

Reputation: 202836

It seems odd that you are mixing reach-router and react-router-dom, it's successor, but the root of your issue with the tabs is because each Tab component is rendering a Link but the entire tab isn't responsible for navigation.

enter image description here

Only the text part in the middle of each tab/button is the actual link, so the navigation only works if you precisely click on the text part of each tab that is the link.

To resolve you can render each Tab component as a Link component.

The as prop and custom component

<TabList>
  <Tab as={Link} to="/">
      tab1
  </Tab>
  <Tab as={Link} to="/executive_functions_coaching/">
    tab
  </Tab>
  <Tab as={Link} to="/somatics/">
    tab3
  </Tab>
</TabList>

Edit url-not-changing-consistently-in-react-router

Upvotes: 4

Related Questions