Обновление компонента breadcrumb при щелчке по боковой панели компонента NavLinks - PullRequest
Новая
       33

Обновление компонента breadcrumb при щелчке по боковой панели компонента NavLinks

1 голос
/ 13 апреля 2020

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

Я использую реагировать, реагировать-маршрутизатор и материал-интерфейс.

У меня есть меню навигации по боковой панели (SidebarMenu. js). Это буквально код из примера панели инструментов material-ui. Этот компонент SidebarMenu просто возвращает компонент, который является списком ListItems. Каждый с NavLinks внутри для правильной реакции маршрутизации. 

export default function SideBarMenu() {
const classes = useStyles();


return (
<>
<List>
      <ListItem button component={NavLink} to="/" exact activeClassName={classes.navLinkSelectedItem} >
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="Home" />
      </ListItem>
      ...

Тогда у меня есть компонент BreadCrumbs. Это также в основном копия «хлебных крошек», интегрированных с React Router, которые можно увидеть на странице примеров материала и пользовательского интерфейса под «хлебными крошками». 

    import { BrowserRouter, Link as RouterLink } from "react-router-dom";

    const breadcrumbNameMap = {
    '/main': 'Main',
    '/main/important': 'Important',
    '/trash': 'Trash',
    '/spam': 'Spam',
    '/drafts': 'Drafts',
    };

    function ListItemLink(props) {
    const { to, open, ...other } = props;
    const primary = breadcrumbNameMap[to];

    return (
      <li>
        <ListItem button component={RouterLink} to={to} {...other}>
          <ListItemText primary={primary} />
          {open != null ? open ? <ExpandLess /> : <ExpandMore /> : null}
        </ListItem>
      </li>
    );
  }

  ListItemLink.propTypes = {
    open: PropTypes.bool,
    to: PropTypes.string.isRequired,
  };

  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
      flexDirection: 'column',
      width: 360,
    },
    lists: {
      backgroundColor: theme.palette.background.paper,
      marginTop: theme.spacing(1),
    },
    nested: {
      paddingLeft: theme.spacing(4),
    },
  }));

  const LinkRouter = (props) => <Link {...props} component={RouterLink} />;

  export default function MainBreadCrumbs() {
    const classes = useStyles();
    return (
      <BrowserRouter initialEntries={['/main']} initialIndex={0}>
        <div className={classes.root}>
          <Route>
            {({ location }) => {
              const pathnames = location.pathname.split('/').filter((x) => x);

              return (
                <Breadcrumbs aria-label="breadcrumb">
                  <LinkRouter color="inherit" to="/">
                    Home
                  </LinkRouter>
                  {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}>
                        {breadcrumbNameMap[to]}
                      </Typography>
                    ) : (
                      <LinkRouter color="inherit" to={to} key={to}>
                        {breadcrumbNameMap[to]}
                      </LinkRouter>
                    );
                  })}
                </Breadcrumbs>
              );
            }}
          </Route>

В моей главной панели инструментов / приложении. js я затем использую React Router для изменить, какие компоненты отображаются на основе ссылки, легко peasy (я думал) ... 

    return (
    <div className={classes.root}>
      <CssBaseline />
      <Router>

      <AppBar position="absolute" className={ clsx(classes.appBar, open && classes.appBarShift) }>
        <Toolbar className={classes.toolbar}>
         ... toolbar / menu junk ...
        </Toolbar>
      </AppBar>

      <Drawer
        variant="permanent"
        classes={{
          paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
        }}
        open={open}
      >
        <div className={classes.toolbarIcon}>
          <IconButton onClick={handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <Divider />
        <SideBarMenu/>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Switch>
          <MainBreadCrumbs/>
            <Route exact path="/">
              <Home/>
            </Route>
            <Route path="/schedule">
            <div>Scheduling Page</div>
            </Route>
            <Route path="/patient">
              <Dashboard />
            </Route>
            <Route path="/tasks">
            <div>Tasking Page</div>
            </Route>   
          </Switch>
        </Container>
      </main>
      </Router>
    </div>
  );
}

И вот где я go сумасшедший. Боковая навигация работает отлично. щелчок по ссылкам отображает соответствующие компоненты Dashboard точно так же, как должен работать React Router. Проблема заключается в том, что нет явной связи между нажатием этих ссылок NavLink на боковой панели и указанием компоненту BreadCrumbs обновить себя, добавив новый URL / ссылку для анализа.

Точно так же, если я искусственно поместил несколько ссылок в компонент BreadCrumbs, я могу щелкнуть их, URL-адрес изменится, и хлебные крошки будут повторно проанализированы и обновлены, НО он не хочет обновлять основную панель инструментов или боковую панель, на которые NavLinks ссылается отразить изменение.

В строке, я не уверен, что я испортил свой код или мне не хватает необходимости разрешать связь между компонентами, но если позже, но я нахожусь на потеря в том, что «лучшие» практики для разрешения перекрестных разговоров о состоянии маршрутизатора между компонентами. Есть ли у кого-нибудь примеры, чтобы указать мне правильное направление или простые способы исправить приведенные выше примеры, чтобы учесть это? Очень ценится заранее. Я бы очень хотел разделить свои компоненты ради организации и простоты чтения, но единственное исправление, о котором я могу подумать, - это объединить ВСЕ вышеприведенный код в одно смехотворно большое Основное приложение.

Приветствия

...