Question

在我的带有React Router的reactJS应用程序中，我试图制作动态面包屑。

我尝试过：

NULL

但是我只有一个group by。

也许是因为我的网址中包含const Breadcrumbs = () => <Route path="*" render={props => { let parts = props.location.pathname.split("/"); const place = parts[parts.length-1]; parts = parts.slice(1, parts.length-1); return <p>{parts.map(crumb)}/{place}</p>}} />; const crumb = (part, partIndex, parts) => { const path = ['', ...parts.slice(0, partIndex+1)].join("/"); return <Link key={path} to={path} >{part}</Link>};吗？（即/）

对于简单的面包屑，有什么好的解决方案？

预先感谢

更新：

[...]

http://localhost:8080/#/products/

Answer 1

也许您可以使用window.location.hash来简化URL路径部分的提取？

因此，遵循以下原则：

const Breadcrumbs = () => <Route path="*" render={ props => {

    const hash = window.location.hash
    const parts = hash.split('/').filter(part => part.indexOf('#') === -1) // Removes first # part
    let path = ''

    return <p>{ parts.map((part, index) => {

      // Append part to current path
      path += '/' + part 

      return <Link key={index} to={path}>{part}</Link>    
    }) }
    </p>
}} />;

反应js面包屑

1 个答案: