React Router 3 Breadcrumb Dropdown

Question

I am trying to change the route based on the dropdown option in the breadcrumb.Any suggestions would be appreciated.

This is the component that is getting the first option but I am not sure how to gran the other options after the dropdown is generated.

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>
  );
};

this is the component that is displaying the breadcrumbs.

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

I was able to do this by passing this.props.router.push into the onClick prop and specifying the value.

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>
    );
  }
}