反应 js 面包屑

Question

在我带有 React 路由器的 ReactJS 应用程序中，我正在尝试制作动态面包屑。

我试过这个：

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

但我只有一个/。

也许是因为我的 url 在 url 中有一个 #？（即http://localhost:8080/#/products/）

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

提前致谢

更新：

<Provider store={store}>
                <AppContainer>
                    <Router history={history}>
    <div>
                            <div className={to.topBar}>
                                <TopBarHelper changeRole={this.changeRole} currentRole={this.state.currentRole} users={this.state.users}/>
                            </div>
                            <div className={css.sidebararound}>
                                <div className={css.sidebar}>
                                    <ul>
                                        <li><NavLink to="/dashboard" activeClassName={css.activeSidebar} className="fa fa-bars fa-2x"/>
                                            <ul className={css.SubMenu}>
                                                <li><NavLink to="/dashboard" activeClassName={css.activeSidebar} aria-hidden="true">{t('sidebar:dashboard.tooltip')}</NavLink></li>
                                            </ul>
                                        </li>

[...]

<ThemeProvider theme={theme}>
                                <MuiThemeProvider muiTheme={amTheme}>
                                    <div className={i.content}>
                                        {this.props.loaded ?
                                            <Switch>
                                                <Route path="/folders" currentRole={this.state.currentRole} component={Folders}/>
                                                    <Route exact path="/" component={props => <DashboardRoutes {...props} currentRole={this.state.currentRole} users={this.state.users} client={this.state.clientId}/>}/>

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 面包屑

react js breadcrumbs

breadcrumbs

reactjs

react-router