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

Question

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

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 一样，在浏览器加载组件时将打开 Booking 选项卡。如果我将带有 booking 的 URL 提供给某人，并且如果他将该 URL 粘贴到浏览器中，则它将被选中并打开 booking 选项卡，而不是默认的第一个选项卡。我想如果我可以编写一个可以确定浏览器 URL 并将其与 features 数组中的 url 匹配的函数，如果 url 匹配，它将从数组中获取匹配的选项卡索引并将其传递给 selectedTabKey 道具，然后它可能会根据浏览器 url 的位置动态打开选定的选项卡。selectedTabKey 道具将始终将数字作为 PropType。我需要建议和代码示例来实现这些功能。

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 道具