URL not changing consistently in React router

Question

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?

Answer 1

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.

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>