通过匹配浏览器 URL 和选项卡 URL 打开特定选项卡 [英] Open a specific tab by matching the browser URL and Tab URL

问题描述

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

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，因此默认情况下将选择并打开第三个选项卡，即:Booking.现在我想实现一个功能，即通过匹配当前 URL 来确定所选选项卡.就像 URL 中包含 booking 一样，在浏览器加载时将打开 Booking 选项卡零件.如果我将带有 booking 的 URL 提供给某人，并且如果他将该 URL 粘贴到浏览器中，则会选择并打开 booking 选项卡，而不是首先打开默认选项卡.标签.我想如果我可以编写一个可以确定浏览器 URL 并将其与 features 数组中的 url 匹配的函数，如果 url 匹配，它将从数组中获取匹配的选项卡索引并将其传递给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 道具

and then pass the getSelectedTabKey to selectedTabKey props

这篇关于通过匹配浏览器 URL 和选项卡 URL 打开特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！