[Tabs] Interplay with React Router 6

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am using React Router 6 **with ** nested routes. In my Tabs I need to find the selected path for the value prop. It worked fine with RR5, but I feel like in RR6 we don't have the necessary tools anymore.

Somewhere I have found an issue which tackles this problem. However, it didn't work with nested routes. (Sorry, cannot find issue anymore.)

I use a helper library (see below) which finds the path (unreliable?!). Anyway, I want to open this issue in case anyone else runs across it and wants to provide a solution. Not asking for help here, just providing a solution and a place where people can contribute to this issue.

import * as React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import cs from 'classnames';
import stringSimilarity from 'string-similarity';

import * as S from './styles';

const TabNavigation = ({ tabs }) => {
  const { pathname } = useLocation();

  const matches = stringSimilarity.findBestMatch(
    pathname,
    tabs.map((tab) => tab.to)
  );

  return (
    <S.Tabs
      value={tabs[matches.bestMatchIndex].to}
      variant="scrollable"
      scrollButtons="on"
      TabIndicatorProps={{
        style: { backgroundColor: 'transparent' },
      }}
    >
      {tabs.map((tab, index) => (
        <S.Tab
          key={tab.label}
          label={tab.label}
          value={tab.to}
          to={tab.to}
          component={NavLink}
          className={cs({
            disabled: tab.disabled,
            active: matches.bestMatchIndex === index,
          })}
        />
      ))}
    </S.Tabs>
  );
};

export { TabNavigation };

Expected behavior 🤔

No response

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

No response

Start by reproducing the nested-route behavior with the provided TabNavigation example and React Router 6. The issue names no repository files or tests and provides no expected behavior, so the relevant Tabs integration point and acceptance criteria must be established before implementation.