javascript - 将路由添加到面包屑组件

Question

我已经创建了一个 Breadcrumb 组件，但我正在努力为其添加路由。

到目前为止，该组件能够根据我们发送到数组的元素数量来加载自定义数量的节点，并在单击时将节点的名称登录到控制台。

需要的是在单击节点时使此面包屑更改 url。

它应该包含如下内容：

  <Switch>
    <Route path="/component0" component={Component0} />
    <Route path="/component1" component={Component1} />
    ...
  </Switch>

是否可以为自定义数量的节点制作它？

这是到目前为止的代码：

父组件：

import React, { useState } from 'react';

import Breadcrumbs from './Breadcrumbs';
export interface BreadcrumbProps {}

export function Breadcrumb(props: BreadcrumbProps) {
  const [crumbs, setCrumbs] = useState(['Home', 'Category', 'Sub Category']);

  const selected = (crumb: any) => {
    console.log(crumb);
  };

  return (
    <div>
      <Breadcrumbs crumbs={crumbs} selected={selected} />
    </div>
  );
}

export default Breadcrumb;

子组件：

function Breadcrumbs(props: any) {
  function isLast(index: number) {
    return index === props.crumbs.length - 1;
  }

  return (
    <nav className=''>
      <ol className=''>
        {props.crumbs.map((crumb, ci) => {
          const disabled = isLast(ci) ? 'disabled' : '';

          return (
            <li key={ci} className=''>
              <button className={`btn btn-link ${disabled}`} onClick={() => props.selected(crumb)}>
                {crumb}
              </button>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export default Breadcrumbs;

标签： javascriptreactjstypescriptreact-router-dombreadcrumbs