Кнопка Materialize Hover не работает с React Router - PullRequest
0 голосов
/ 04 марта 2020

Проблема: материализация CSS плавающая кнопка работает отлично, но когда я меняю страницу (с реакции на роутер dom), например HOME> О> HOME снова, она больше не работает.

Домой:

import AddBtn from "../layout/AddBtn-float";

const Home = () => {
  return (
    <Fragment>
      <SearchBar />
      <div className="container">
        <AddBtn />
...

AddBtn. js

const AddBtn = () => {
  return (
    <div className="fixed-action-btn direction-top">
<a
        href="#add-task-modal"
        className="btn-floating btn-large blue darken-2 modal-trigger"
      >
        <i className="large material-icons">add</i>
      </a>
      <ul>
        <li>
          <a
            href="#user-list-modal"
            className="btn-floating green modal-trigger"
          >
            <i className="material-icons">person</i>
          </a>
        </li>
        <li>
          <a href="#add-user-modal" className="btn-floating red modal-trigger">
            <i className="material-icons">person_add</i>
          </a>
        </li>
      </ul>
    </div>
  );
};

export default AddBtn;

Я не эксперт, но выглядит как «ошибка» Материализации, требующая обходного пути.

Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 05 марта 2020

Я пишу решение, может кому-то это нужно. Просто вставьте каждую страницу

useEffect(() => {
    M.AutoInit();
    //eslint-disable-next-line
  }, []);

Я использовал это только в приложении. js, но выглядит недостаточно

...