jak přidat komponentu karty a načíst stránky na kartách v aplikaci Reag js?

Mám aplikaci response js, na které pracuji. Vytvořil jsem myfirstcomponent, který volá rest api a zobrazuje některá data json. Nyní chci rozšířit svou aplikaci a přidat další komponenty, řekněme mySecondComponent. ale chci to udělat tak, že pro to vytvořím karty. tak jsem prozkoumal a na základě tutoriálů jsem vytvořil karty a také komponentu karty. Nyní chci upravit svou metodu vykreslování v souboru app.js tak, abych mohl vykreslit své komponenty v komponentě karta. tak jsem zkusil následující, přidal jsem komponentu Tabs and Tab do aplikace div, nyní musím zobrazit/skrýt komponenty na základě vybrané karty. . Jsem nový v reakci, takže se chci ujistit, že jdu správným směrem. je to správný způsob, jak to udělat v respondjs?

render() {
  return (
    <div className="app">
      <Tabs tabs={['first', 'second']} selected={ this.state.selected } 
        setSelected={ this.setSelected }>
          <Tab isSelected={ this.state.selected === 'first' }></Tab>
          <Tab isSelected={ this.state.selected === 'second' }></Tab>
        </Tabs>
        <myfirstcomponent className="compnent"/>
        <mySecondcomponent className="compnent"/>
      </div>
    );
  }

soubor app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <myfirstcomponent className="App-com"/>
      </div>
    );
  }
}

export default App;

Karty

import React from 'react';
class Tabs extends React.Component {
  render() {
    return (
       <div style={{ width: '30%' }}>
          <ul className="nav nav-tabs">
             {
                 this.props.tabs.map(tab => {
                   const active = (tab === this.props.selected ? 'active ' : '' );
                   return (
                     <li className="nav-item" key={ tab }>
                       <a className={"nav-link " + active + styles.tab} onClick={ () => 
                         this.props.setSelected(tab) }>
                         { tab }
                       </a>
                    </li>
                  );
                 })
             }
          </ul>
        { this.props.children }
      </div>
    );
  }
}
export default Tabs;

Tab.js

import React from 'react';
class Tab extends React.Component {
  render() {
    if (this.props.isSelected) {
      return (
        <div>
          { this.props.children }
        </div>
      );
    }
    return null;
  }
}
export default Tab;

Odpověď

Myslím, že tento přístup není správný. Měli byste používat směrování uvnitř komponenty karta a odkazy na trasy. Stránka Pluralsight má docela dobrý příklad toho, jak implementovat to, co chcete udělat. https://app.pluralsight.com/guides/how-to-create-nested-tab-routes-with-react-router