从外部组件单击按钮时，在一个组件中打开特定的选项卡

我有一个HomePage具有子组件的组件Platform。在平台组件中，有一些链接，单击这些链接后，应在浏览器中打开一个新选项卡，这将打开另一个组件中的特定选项卡PlatformFeatures。在PlatformFeatures组件中，有一个Tab组件，其中每个选项卡将具有唯一的选项卡编号或索引和url。该网址将与平台组件中链接的网址相同（我想）。事情是，我将单击Platform组件的链接，它将使用PlatformFeatures组件中的Tab组件的链接打开特定的选项卡。这将在浏览器的新选项卡中打开，并且浏览器URL将具有特定标签的链接可能会在实际链接之后添加为哈希。这样，唯一链接就可以与任何人共享，并且如果将URL粘贴到浏览器中，它将打开选项卡Component的特定选项卡。这是我的HomePage组件代码：

import React from 'react';
import PropTypes from 'prop-types';
import Platform from './Platform';

const HomePage = ({ additionalProps }) => {
  const { routes } = additionalProps;

  return (
    <div className="homepage">
      <Platform routes={routes} />
    </div>
  );
};

HomePage.defaultProps = {
  additionalProps: PropTypes.shape({
    routes: null,
  }),
};

HomePage.propTypes = {
  additionalProps: PropTypes.shape({
    routes: PropTypes.shape({
      features: {
        platform: PropTypes.string,
      },
  }),
};

export default HomePage;

这是平台组件：

    import React from 'react';
    import PropTypes from 'prop-types';
    import { I18nText } from '@wtag/react-comp-lib';
    import profile from 'affiliateImages/person-24px.svg';
    import search from 'affiliateImages/search-24px.svg';
    import booking from 'affiliateImages/flight-24px.svg';
    
    const Platform = () => {
    
      const features = [
        {
          id: 0,
          icon: profile,
          name: <I18nText id="homepage.features.profiles.title" />,
          description: <I18nText id="homepage.features.profiles.description" />,
          link: linkToFeatures1,
        },
        {
          id: 1,
          icon: search,
          name: <I18nText id="homepage.features.search.title" />,
          description: <I18nText id="homepage.features.search.description" />,
          link: linkToFeatures2,
        },
        {
          id: 2,
          icon: booking,
          name: <I18nText id="homepage.features.booking.title" />,
          description: <I18nText id="homepage.features.booking.description" />,
          link: linkToFeatures3,
        },
      ];
    
      return (
        <div className="homepage__platform-section">
          <div className="container">
            <div className="homepage__platform-section-header">
              <I18nText id="homepage.features.header.title" />
            </div>
            <div className="grid">
              {features.map(({ icon, name, description, link, id }) => (
                <div
                  className="col-xlg-4 col-lg-4 col-md-6 col-sm-6 col-xs-12 col-xxs-12"
                  key={id}
                >
                  <div>
                    <span>
                      <img
                        src={icon}
                        alt="icon"
                        className="homepage__platform-section-icon"
                      />
                    </span>
                    <span className="homepage__platform-section-name">{name}</span>
                  </div>
                  <div className="homepage__platform-section-description">
                    {description}
                  </div>
                  <div>
                    <a href={link} className="homepage__platform-section-link">
                      <I18nText id="homepage.features.read.link" />
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    };
    
    export default Platform;

这是PlatformFeatures组件

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 features = [
  {
    tabNum: 0,
    title: (
      <I18nText
        id="features.platform.profiles"
        className="platform-features__profiles-tab"
      />
    ),
    content: <Profiles />,
  },
  {
    tabNum: 1,
    title: (
      <I18nText
        id="features.platform.search"
        className="platform-features__search-tab"
      />
    ),
    content: <Search />,
  },
  {
    tabNum: 2,
    title: (
      <I18nText
        id="features.platform.booking"
        className="platform-features__booking-tab"
      />
    ),
    content: <Booking />,
  },
];

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

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

export default PlatformFeatures;

RTabs组件中的selectedTabKey道具中传递的数字是features数组中特定项目的索引号。因此，当组件在浏览器的新页面中加载时，selectedTab将自动打开。我想我们需要创建一个函数，该函数将采用与Platform组件中单击的链接匹配的selectedKey索引，并将其传递给此处。我需要一些建议和代码示例，以便使用reactjs实现所有这些功能。

这是我想要实现的gif效果：http : //g.recordit.co/W5nrNZAuOd.gif