通过匹配浏览器 URL 和选项卡 URL 打开特定选项卡

Question

我有一个 React 组件，其中有一个 Tab 组件。这是组件：

import React from 'react';
import { RTabs, I18nText } from '@wtag/react-comp-lib';
import Profiles from './Profiles';
import Search from './Search';
import Booking from './Booking';

const pathName = window.location.href.split('/').reverse()[0];

const features = [
  {
    tabNum: 0,
    title: (
      <I18nText
        id="features.platform.profiles"
        className="platform-features__profiles-tab"
      />
    ),
    content: <Profiles />,
    url: '/en-US/p/features/applications/profiles',
  },
  {
    tabNum: 1,
    title: (
      <I18nText
        id="features.platform.search"
        className="platform-features__search-tab"
      />
    ),
    content: <Search />,
    url: '/en-US/p/features/applications/search',
  },
  {
    tabNum: 2,
    title: (
      <I18nText
        id="features.platform.booking"
        className="platform-features__booking-tab"
      />
    ),
    content: <Booking />,
    url: '/en-US/p/features/applications/booking',
  },
];

const getItems = () => {
  return features.map(({ tabNum, title, content, url }, index) => ({
    tabNum,
    key: index,
    title,
    content,
    url,
  }));
};

const PlatformFeatures = () => {
  return (
    <div className="platform-features__tabs">
      <RTabs isVertical={true} items={getItems()} selectedTabKey={2} />
    </div>
  );
};

export default PlatformFeatures;

在浏览器中加载组件时，默认选择并打开第一个选项卡。单击相应的选项卡时，选项卡将打开。选定的选项卡索引号可以传递给 RTabs 组件的 selectedTabKey 属性，并且将选择并打开该特定选项卡。如此处所示，索引 2 已通过，因此默认情况下将选择并打开第三个选项卡，即 Booking。现在我想实现一个功能，即通过匹配它所在的当前 URL 来确定所选选项卡。就像 URL 中有 booking 一样，预订选项卡将被打开当浏览器加载组件时。如果我将 URL 和 booking 提供给某人，并且如果他将 URL 粘贴到浏览器中，将选择并打开 booking 选项卡，而不是默认第一个选项卡。我想如果我能写一个函数来确定浏览器 URL 并将其与 features 数组中的 url 匹配，如果 url 匹配，它将采用从数组中匹配标签索引并将其传递给 selectedTabKey 道具，然后它可能会根据浏览器的位置动态打开所选标签 url。selectedTabKey 道具将始终采用数字作为一个道具类型。我需要建议和代码示例来实现这些功能。

Answer 1

const browserURL = document.location.pathname;
const filteredURL = features.map(({ url }) => url);

  const checkURL = (arr, val) => {
    return arr.filter(function(arrVal) {
      return val === arrVal;
    })[0];
  };

  const matchedURL = checkURL(filteredURL, browserURL);
  const getSelectedTabKey = filteredURL.indexOf(matchedURL);

然后将 getSelectedTabKey 传递给 selectedTabKey props

通过匹配浏览器 URL 和选项卡 URL 打开特定选项卡

Open a specific tab by matching the browser URL and Tab URL

javascript

tabs

reactjs