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

问题描述：

我有一个React组件，其中包含一个Tab组件.这是组件:

I have a react component which has a Tab Component in it. This is the component:

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，因此默认情况下将选择并打开第3个标签，即 Booking .现在，我想实现一种功能，该功能将通过匹配所选URL当前所在的URL来确定.就像该URL中包含 booking 一样，将在浏览器加载该URL的同时打开Booking选项卡成分.就像我给其中包含 booking 的URL并将其粘贴到浏览器中一样，如果他将该URL粘贴到浏览器中，则会选择 booking 标签并将其打开而不是默认的默认设置标签.我认为，如果我可以编写一个可以确定浏览器URL并将其与 features 数组中的url相匹配的函数，并且如果url匹配，它将从数组中获取匹配的tab索引并将其传递给 selectedTabKey 道具，那么它可能会根据浏览器URL的位置动态地打开选定的标签. selectedTabKey 道具将始终以数字作为PropType.我需要一些建议和代码示例来实现这些功能.

When the component is loaded in the browser the first tab is selected and opened by default. While clicking on the respective tabs, the tab opens. The selected tab index number can be passed to selectedTabKey props of the RTabs component and that particular tab will be selected and opened. As seen here index 2 is passed so the 3rd tab i.e: Booking will be selected and opened by default. Now I want to achieve a functionality that the selected tab will be determined by matching the current URL it is in. Like if the URL has booking in it, the Booking tab will be opened while the browser loads the component. It will work like if I give the URL with booking in it to someone and if he pastes that URL in the browser the booking tab will be selected and opened not the default first tab. I think if I can write a function which can determine the browser URL and match it with the urls in the features array and if url matches, it will take the matched tab index from the array and pass it to the selectedTabKey props, then it might open the selected tab dynamically depending on the location of the browser url.selectedTabKey props will always take number as a PropType. I need suggestions and code examples to implement these functionalities.

答

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

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

相关推荐