Интеграция Material-UI Breadcrumb с реактивным маршрутизатором - PullRequest
Новая
       16

Интеграция Material-UI Breadcrumb с реактивным маршрутизатором

0 голосов
/ 07 июня 2019

Я пытаюсь использовать кеширование Material-UI с реакции-маршрутизатором.Как я могу программно определить текущий маршрут.

На веб-сайте Material-UI есть пример того, как его использовать, но он требует использования статического breadcrumbNameMap.Я уже пытался разделить путь с помощью HOC "withRouter", но он не работает. 

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Breadcrumbs, Link, Paper, Typography} from "@material-ui/core";

import { withRouter } from "react-router-dom";

import { useTranslation } from "../Translate";

const useStyles = makeStyles(theme => ({
    root: {
        justifyContent: "center",
        flexWrap: "wrap",
    },
    paper: {
        padding: theme.spacing(1, 2),
    },
}));

const breadcrumbNameMap = {
    "/inbox": "Inbox",
    "/inbox/important": "Important",
    "/trash": "Trash",
    "/spam": "Spam",
    "/drafts": "Drafts",
};

function SimpleBreadcrumbs(props) {
    const classes = useStyles();
    console.log("Breadcrumbs", props);
    const { location } = props;
    const pathnames = location.pathname.split("/").filter(x => x);
    console.log("pathnames", pathnames);

    return (
        <div className={classes.root}>
            <Paper elevation={0} className={classes.paper}>
                <Breadcrumbs aria-label="Breadcrumb">
                    <Link color="inherit" href="/">
                        Home
                    </Link>
                    {pathnames.map((value, index) => {
                        const last = index === pathnames.length - 1;
                        const to = `/${pathnames
                            .slice(0, index + 1)
                            .join("/")}`;

                        console.log("last", last, "to", to);

                        const path = value.split("-");
                        console.log("path", path);
                        // Convert first char of string to uppercase
                        path.forEach((item, i) => {
                            // Only capitalize starting from the second element
                            if (i > 0) {
                                path[i] =
                                    path[i].charAt(0).toUpperCase() +
                                    path[i].slice(1);
                            }
                        });

                        // return (
                        //     <Typography color="textPrimary" key={to}>
                        //         {useTranslation(path.join(""))}
                        //     </Typography>
                        // );

                        // // return (
                        // //     <Typography color="textPrimary" key={to}>
                        // //         {pathnames[to]}
                        // //     </Typography>
                        // // );

                        return last ? (
                            <Typography color="textPrimary" key={to}>
                                {breadcrumbNameMap[to]}
                            </Typography>
                        ) : (
                            <Link color="inherit" to={to} key={to}>
                                {useTranslation(path.join(""))}
                            </Link>
                        );
                    })}
                </Breadcrumbs>
            </Paper>
        </div>
    );
}

export default withRouter(SimpleBreadcrumbs);

Если URL в моем браузере указывает на "http://example.com/level1/level2",, я ожидал, что результат будетиз хлебных крошек будет:

Home / Level1 / Level2

Если URL в браузере будет "http://example.com/level1/",, я бы ожидал:

Home /Уровень 1

Перевод также может быть добавлен позже.Я включил его для показа моего окончательного ожидаемого результата.

Ответы [ 2 ]

1 голос
/ 09 июня 2019

BreadcrumbNameMap требуется только в том случае, если метки на хлебных крошках отличаются от ссылок URL-адресов (например, путь / level1 'отображается как' Level 1 'в хлебной крошке.

Вот модифицированная версия Material UI BreadcrumbПример, интегрированный с реагирующим маршрутизатором.

Попробуйте полную программу здесь https://codesandbox.io/s/dark-architecture-sgl12?fontsize=14

https://sgl12.codesandbox.io/level1/level2

import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Typography from '@material-ui/core/Typography';
import { Link as RouterLink } from 'react-router-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';

function SimpleBreadcrumbs() {
  return <Route>
    {({ location }) => {
      const pathnames = location.pathname.split('/').filter(x => x);
      return (
        <Breadcrumbs aria-label="Breadcrumb">
          <RouterLink color="inherit" to="/">
            Home
            </RouterLink>
          {pathnames.map((value, index) => {
            const last = index === pathnames.length - 1;
            const to = `/${pathnames.slice(0, index + 1).join('/')}`;

            return last ? (
              <Typography color="textPrimary" key={to}>
                {value}
              </Typography>
            ) : (
                <RouterLink color="inherit" to={to} key={to}>
                  {value}
                </RouterLink>
              );
          })}
        </Breadcrumbs>
      );
    }}
  </Route>

}

export default function App() {
  return <div>
    <Router>
      <SimpleBreadcrumbs />

      <Route path='/' exact component={Home}></Route>
      <Route path='/level1' exact component={Level1}></Route>
      <Route path='/level1/level2' exact component={Level2}></Route>

    </Router>
  </div>
}
0 голосов
/ 11 июня 2019

Я решил опубликовать отдельный ответ вместо комментария к вашему коду, Мира.Спасибо за помощь.Я изменил часть тела функции карты и добавил возможность перевода.К сожалению, он не работает для меня с функцией реагирования на ловушки, поэтому я преобразовал его в компонент класса.

Мой компонент теперь выглядит следующим образом: 

import React, { PureComponent } from "react";
import * as PropTypes from "prop-types";
import { Breadcrumbs, Link, Paper, Typography } from "@material-ui/core";
import { connect } from "react-redux";
import { Route, Link as RouterLink } from "react-router-dom";

import { LanguageActions } from "../../redux/actions";

/**
 * This component has to be a class component to be able
 * to translate the path values dynamically.
 * React hooks are not working in this case.
 */
class SimpleBreadcrumbs extends PureComponent {
    render = () => {
        const { translate } = this.props;
        const LinkRouter = props => <Link {...props} component={RouterLink} />;

        return (
            <Paper elevation={0} style={{ padding: "8px 16px" }}>
                <Route>
                    {({ location }) => {
                        const pathnames = location.pathname
                            .split("/")
                            .filter(x => x);
                        return (
                            <Breadcrumbs aria-label="Breadcrumb">
                                <LinkRouter
                                    color="inherit"
                                    component={RouterLink}
                                    to="/"
                                >
                                    Home
                                </LinkRouter>
                                {pathnames.map((value, index) => {
                                    const last = index === pathnames.length - 1;
                                    const to = `/${pathnames
                                        .slice(0, index + 1)
                                        .join("/")}`;

                                    // Split value so the string can be transformed and parsed later.
                                    const path = value.split("-");
                                    // Convert first char of string to uppercase.
                                    path.forEach((item, i) => {
                                        // Only capitalize starting from the second element.
                                        if (i > 0) {
                                            path[i] =
                                                path[i]
                                                    .charAt(0)
                                                    .toUpperCase() +
                                                path[i].slice(1);
                                        }
                                    });

                                    return last ? (
                                        <Typography
                                            color="textPrimary"
                                            key={to}
                                        >
                                            {translate(path.join(""))}
                                        </Typography>
                                    ) : (
                                        <LinkRouter
                                            color="inherit"
                                            to={to}
                                            key={to}
                                        >
                                            {translate(path.join(""))}
                                        </LinkRouter>
                                    );
                                })}
                            </Breadcrumbs>
                        );
                    }}
                </Route>
            </Paper>
        );
    };
}

// To be able to translate every breadcrumb step,
// translations have to be passed down to this component.
// Otherwise the component does not get notified
// if user decides to switch language
const connector = connect(
    ({ translations }) => ({ translations }),
    dispatch => ({
        translate: key => dispatch(LanguageActions.translate(key)),
    })
);

SimpleBreadcrumbs.propTypes = {
    translate: PropTypes.func,
};

SimpleBreadcrumbs.defaultProps = {
    translate: () => {},
};

export default connector(SimpleBreadcrumbs);
...