Слушатели событий onClick не работают в Remix

Question

В моем приложении Remix я пытаюсь условно отобразить виджет пользовательского интерфейса на основе значения переменной состояния. Вот мой код.

      import { useState } from "react";
import type { LinksFunction } from "remix";
import stylesUrl from "../styles/index.css";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: stylesUrl
    }
  ];
};

export default function Index() {
  const [isMenuOpen,setMenuOpen] = useState(false)

  function toggleNav(){
    window.alert("hh") // no alert is shown
    console.log("hi") // no console statement is printed
    setMenuOpen(!isMenuOpen)
  }

  return (
    <div className="landing">
     <button onClick={toggleNav}>test</button>
    </div>
  );
}

Тем не мение, функция не запускается при нажатии кнопки. Я не видел никаких предупреждений или выходных данных в консоли.

Я не мог понять, почему это не работает. Было бы здорово, если бы кто-нибудь указал мне, что я здесь делаю не так. TIA.

Answer 1

Убедитесь, что вы визуализируете компонент Scripts из Remix в корневом маршруте, без него ваше приложение не будет загружать клиентскую сторону JS.

См. https://remix.run/docs/en/v1/api/remix#meta-links-scripts .