Блог

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

 const sideBar = [
{
  id: 0,
  name: "Add Company",
  icon: admin_add_company,
  path: `${url}register`,
  exact: true,
  component: () => <div>The 1st component</div>,
},
{
  id: 1,
  name: "Configuration",
  icon: configuration_icon,
  path: `${url}/configuration`,
  exact: false,
  component: () => <div>The 2nd component</div>,
},
{
  id: 2,
  name: "Delivery",
  icon: delivery_admin_icon,
  path: `${url}/delivery`,
  exact: false,
  component: () => <div>The 3rd component</div>,
},
 

];

И я перебираю разные маршруты, чтобы изменить содержимое рядом с боковой панелью в соответствии с выбранным маршрутом, и вот как это реализовано:

   {sideBar.map((route, index) => (
            <Route
              key={index}
              name={route.name}
              path={route.path}
              exact={route.exact}
              url={url}
              component={route.component}
            />
          ))}
 

и вот ссылки, которые представляют все маршруты:

 <Nav defaultActiveKey={`${url}`} className="flex-column">
            <Nav.Link
              eventKey="register-link"
              active={active.register}
              onClick={() => {
                history.push(url);
                toggleLink({ name: "register", value: true });
              }}
            >
              <img src={admin_add_company} />
              <span>Add Company</span>
            </Nav.Link>
            <Nav.Link
              active={active.configuration}
              eventKey="configuration-link"
              onClick={() => {
                history.push(`${url}/configuration`);
                toggleLink({ name: "configuration", value: true });
              }}
            >
              <img src={configuration_icon} />
              <span>Configuration</span>
            </Nav.Link>
            <Nav.Link
              active={active.delivery}
              eventKey="delivery-link"
              onClick={() => {
                history.push(`${url}/delivery`);
                toggleLink({ name: "delivery", value: true });
              }}
            >
              <img src={delivery_admin_icon} />
              <span>Delivery</span>
            </Nav.Link>
            <Nav.Link
              active={active.partners}
              eventKey="partners-link"
              onClick={() => {
                history.push(`${url}/partners`);
                toggleLink({ name: "partners", value: true });
              }}
            >
              <img src={admin_partners} />
              <span>Partners</span>
            </Nav.Link>
        <Nav>
 

Дело в том, что маршруты меняются правильно. Тем не менее, содержимое каждого компонента никогда не изменяется и не отображается. Почему это может произойти? Заранее спасибо.

Измените свой Route реквизит: component -> render

Редактировать

Как насчет того, когда вы меняете свой

 <Nav.Link
    active={active.configuration}
    eventKey="configuration-link"
    onClick={() => {
        history.push(`${url}/configuration`);
        toggleLink({ name: "configuration", value: true });
    }}
>
 

Для

 <Nav.Link
    active={active.configuration}
    eventKey="configuration-link"
    onClick={() => {
        toggleLink({ name: "configuration", value: true });
    }}
    to='/configuration'
>