реагировать JS панировочные сухари - PullRequest
Новая
       14

реагировать JS панировочные сухари

0 голосов
/ 16 октября 2018

В моем приложении activJS с реагирующим маршрутизатором я пытаюсь создать динамические хлебные крошки.

Я пробовал это: 

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

1 Ответ

0 голосов
/ 16 октября 2018

Возможно, вы могли бы использовать 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>
}} />;
...