リアクタ・ルータ3ブレッドクラム・ドロップダウン

Question

パンくずリストのドロップダウン・オプションに基づいて経路を変更しようとしています。

これは最初のオプションを取得しているコンポーネントですが、ドロップダウンが生成された後に他のオプションをどのように設定するかわかりません。

const MenuItemViews = ({ params: { category, subCategory, item }, children }) => { 
 
    const menuItem = sideNavData.lookupItem(category, subCategory, item); 
 
    console.log(menuItem); 
 
    console.info(children); 
 
    return (
 
    <div> 
 
     { 
 
     menuItem.name === 'Bill' 
 
      ? <div> 
 
      <h2>Labels</h2> 
 
      { 
 
       !children 
 
       ? <Link to={`/${category}/${subCategory}/${item}/${menuItem.childItems[0].name}`} > 
 
        <Image src={menuItem.content} /> 
 
       </Link> 
 
       : children 
 
      } 
 
      </div> 
 
      : <ContentContainer> 
 
      <h1>{menuItem.name}</h1> 
 
      <Image src={menuItem.content} alt='item' /> 
 
      </ContentContainer> 
 
     } 
 
    </div> 
 
); 
 
};

これは、ブレッドクラムを表示している成分です。

const labelDropdownOptions = [ 
 
    { key: 'OptionOne', value: 'OptionOne', text: 'OptionOne' }, 
 
    { key: 'OptionTwo', value: 'OptionTwo', text: 'OptionTwo' }, 
 
    { key: 'OptionThree', value: 'OptionThree', text: 'OptionThree' }, 
 
]; 
 

 
class TopBar extends Component { 
 
    resolver = (key) => { 
 
    if (key === 'Home') { 
 
     return key; 
 
    } 
 
    return this.props.params[key]; 
 
    } 
 

 
    dropdownLink = (link, key, text, index, routes) => { 
 
    console.log(routes); 
 
    if (text === 'OptionOne') { 
 
     return (
 
     <Dropdown defaultValue={'OptionOne'} key={key} options={labelDropdownOptions} /> 
 
    ); 
 
    } 
 
    return <Link key={key} to={link}>{text}</Link>; 
 
    } 
 

 
    render() { 
 
    const { routes, params } = this.props; 
 
    return (
 
     <TopBarHeader> 
 
     <IndexLink to='/'> 
 
      <HomeIcon><Icon name='home' /></HomeIcon> 
 
     </IndexLink> 
 
     <BreadcrumbWrapper> 
 
      <Breadcrumbs 
 
      createLink={this.dropdownLink} 
 
      params={params} 
 
      resolver={this.resolver} 
 
      routes={routes} 
 
      /> 
 
     </BreadcrumbWrapper> 
 
     </TopBarHeader> 
 
    ); 
 
    } 
 
}

Answer 1

私はonClickの小道具にthis.props.router.pushを渡し、値を指定することにより、これを行うことができました。

class TopBar extends Component { 
 
    resolver = (key) => { 
 
    if (key === 'Home') { 
 
     return key; 
 
    } 
 
    return this.props.params[key]; 
 
    } 
 

 
    dropdownLink = (link, key, text, index, routes) => { 
 
    const category = sideNavData.lookupCategory(this.props.category); 
 
    if (link === '/TabTwo/Names/Bill/OptionOne' || link === '/TabTwo/Names/Bill/OptionTwo' || link === '/TabTwo/Names/Bill/OptionThree') { 
 
     return (
 
     <span key={index}> 
 
      { 
 
      Object.keys(category).map((subCategory, i) => { 
 
       return (
 
       <span key={i}> 
 
        { 
 
        Object.keys(category[subCategory]).map((item, itemIndex) => (
 
         <span key={itemIndex}> 
 
         { 
 
          category[subCategory][item].name === 'Bill' 
 
          ? <Dropdown 
 
           defaultValue={'OptionOne'} 
 
           options={category[subCategory][item].childItems} 
 
           onChange={(event, data) => { this.props.router.push(`/${this.props.category}/${subCategory}/${category[subCategory][item].name}/${data.value}`); }} 
 
          /> 
 
          : null 
 
         } 
 
         </span> 
 
        )) 
 
        } 
 
       </span> 
 
      ); 
 
      }) 
 
      } 
 
     </span> 
 
    ); 
 
    } 
 
    return <Link key={key} to={link}>{text}</Link>; 
 
    } 
 

 
    render() { 
 
    const { routes, params } = this.props; 
 
    return (
 
     <TopBarHeader> 
 
     <IndexLink to='/'> 
 
      <HomeIcon><Icon name='home' /></HomeIcon> 
 
     </IndexLink> 
 
     <BreadcrumbWrapper> 
 
      <Breadcrumbs 
 
      createLink={this.dropdownLink} 
 
      params={params} 
 
      resolver={this.resolver} 
 
      routes={routes} 
 
      /> 
 
     </BreadcrumbWrapper> 
 
     </TopBarHeader> 
 
    ); 
 
    } 
 
}