IT技术 - 通过匹配浏览器 URL 和选项卡 URL 打开特定选项卡 - 吾爱随笔录

我有一个react组件，其中有一个选项卡组件。这是组件：

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;

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