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?

Thanks @KeatonBenning... it gets worse. more inconsistent with changing the urls — Katie Melosto, Jan 04 '22 at 22:23
Your linked codesandbox doesn't run, it seems to be missing files. Can you edit it to fix the issues and report back when you've a *running* CSB for us to inspect? Based on what I see above, you've entirely way too many routers... you typically only need one wrapping the entire app to provide any routing context. I'm sure it's no different in `reach-router`, a cousin library to `react-router`. — Drew Reese, Jan 05 '22 at 00:24
Thank you for bringing that to my attention @DrewReese. I had edited it earlier but it did not save. I just did again and simplified it. it's working now on my end. Hopefully the file saved. The links are still problematic, but the sandbox should run without error — Katie Melosto, Jan 05 '22 at 00:46
Also - @DrewReese I had tried a single router, but I did not know to make it work with the tabs. The Tab feature I'm using surrounds the content of each page, so I wasn't able to put the router around the different pages in the Tabs. I was able to put a router in the index.js but it still did not work well with that — Katie Melosto, Jan 05 '22 at 01:06

score 3 · Accepted Answer · answered Jan 05 '22 at 01:48

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>

score 2 · Answer 2 · answered Jan 05 '22 at 02:17

2

See as following 2 screenshots.

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.

answered Jan 05 '22 at 02:17

genius dev

143
7

score 2 · Answer 3 · answered Jan 05 '22 at 02:22

2

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();

answered Jan 05 '22 at 02:22

Moussa Bistami

929
5
15

URL not changing consistently in React router

3 Answers3