Поместите ссылку в StyledMenuItem в React

Question

Я хотел поставить Linkтак что я могу перейти на другие страницы в React. Почему это не навигация

КОД

  <StyledMenu
  anchorEl={settingsMenu}
  keepMounted
  open={Boolean(settingsMenu)}
  onClose={handleClose}>

  <StyledMenuItem>
    <ListItemIcon component={Link} to={`/accounts`}>
      <PersonIcon />
    </ListItemIcon>
    <ListItemText primary="accounts" />
  </StyledMenuItem>
  <StyledMenuItem component={Link} to={`/orders`}>
    <ListItemIcon>
      <OrderIcon />
    </ListItemIcon>
    <ListItemText primary="Orders" />
  </StyledMenuItem>
</StyledMenu>;

Answer 1

Предполагая <StyledMenuItem> это ваш пользовательский компонент, вы можете легко сделать это, обернув весь JSX в componentопора Для других переданных ему реквизитов (например,to), просто деструктурируйте их и поместите в качестве опор для новой оболочки. component.

import React, { Component } from "react";
export default class StyledMenuItem extends Component {
    render() {

        // simply checks to see if a component prop is passed
        let WrapperComponent = this.props.component;
        if (WrapperComponent === undefined) {
            WrapperComponent = React.Fragment;
        }

        return (
            <WrapperComponent {...this.props}>
                {this.props.children}
            </WrapperComponent>
        );
    }
}

Это каким-то образом имитирует поведение Material UI MenuItem, о котором я ранее писал в своем комментарии.