反应js面包屑

Question

在我的带有反应路由器的 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>};

但我只有一个/。

也许是因为我的网址中有一个#？ （即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>
}} />;