Как go к другому компоненту, когда я нажимаю кнопку в Material Ui

Question

Я работаю над Material Ui. В моем проекте у меня есть один компонент. У меня есть кнопка. Теперь, если я нажимаю кнопку, мне нужно go перейти к другому компоненту. Как этого добиться в Material Ui.

Я установил реакцию-маршрутизатор-дом и все

Это мой код Mobiles. js

import React from "react";
import AddIcon from "@material-ui/icons/Add";
import IconButton from "@material-ui/core/IconButton";
import { Link } from "react-router-dom";

const AddButton = () => {
  return (
    <IconButton>
      <AddIcon background="primary"></AddIcon>
    </IconButton>
  );
};

export default function Mobiles() {
  return (
    <Link>
      <AddButton to="/products"></AddButton>
    </Link>
  );
}

Я создал компонент продуктов и написал в приложении. js.

Если я не уверен с моим сомнением, пожалуйста, оставьте комментарий.

Answer 1

вы можете использовать onClick и использовать исторический хук, примерно так должно работать:

import React from "react";
import AddIcon from "@material-ui/icons/Add";
import IconButton from "@material-ui/core/IconButton";
import { useHistory } from "react-router-dom";

const AddButton = ({route}) => {

const history = useHistory();
const handleClick = () => history.push(route);

  return (
    <IconButton onClick={handleClick}>
      <AddIcon background="primary"></AddIcon>
    </IconButton>
  );
};

export default function Mobiles() {
  return (
      <AddButton route="/products"></AddButton>
  );
}

Answer 2

(без использования маршрутизатора Logi c)

Создание родительского компонента с помощью кнопки Click Функция передает функцию в качестве текущего компонента,

Функция Click Button изменит некоторые функции значение в родительском компоненте и с использованием условного рендеринга Новый компонент может быть визуализирован в позиции текущего компонента

Answer 3

Измените код своего мобильного телефона и используйте to="/products" для ссылки, подобной этой <Link to="/products"></Link>

export default function Mobiles() {
  return (
    <Link to="/products">
      <AddButton />
    </Link>
  );
}

Answer 4

Вам нужно передать to Link, а не свой компонент.

import React from "react";
import AddIcon from "@material-ui/icons/Add";
import IconButton from "@material-ui/core/IconButton";
import { Link } from "react-router-dom";

const AddButton = () => {
  return (
    <IconButton>
      <AddIcon background="primary"></AddIcon>
    </IconButton>
  );
};

export default function Firms() {
  return (
    <Link to="/products">
      <AddButton />
    </Link>
  );
}

Еще один способ сделать это - использовать useHistory Hook от react-router-dom

import React from "react";
import AddIcon from "@material-ui/icons/Add";
import IconButton from "@material-ui/core/IconButton";
import { Link, useHistory } from "react-router-dom";

const AddButton = ({ to }) => {
  const history = useHistory();

  return (
    <IconButton onClick={() => history.push(to)}>
      <AddIcon background="primary"></AddIcon>
    </IconButton>
  );
};

export default function Firms() {
  return (
      <AddButton to="/products"/>
  );
}

Надеюсь, это сработает.