Como dice el título, esencialmente estoy tratando de navegar por mi página web mediante el uso de las teclas de flecha izquierda y derecha en una lista circular. Cada vez que se presiona la flecha derecha, la barra de navegación selecciona el siguiente elemento a la derecha, cada vez que se presiona la flecha izquierda, selecciona la página a la izquierda.
Creé una función para detectar la pulsación de las teclas de flecha izquierda y derecha, pero a partir de ahora solo consola.logs, no estoy muy familiarizado con el enrutador y el interruptor, así que estoy tratando de desarrollar algunas funciones para cambiar la manipulación de la barra de navegación usando la flecha Teclas (mientras se mantiene la capacidad de seleccionar)
import "./App.css"; import { useRef } from "react"; import { useEffect } from "react"; import Navigation from "./Components/UI/Navigation"; import CentralReport from "./Components/Central Report/CentralReport"; import ImageSlideShow from "./Components/Slideshow/ImageSlideShow"; import MapSlideShow from "./Components/Slideshow/MapSlideShow"; import { BrowserRouter as Switch, Route } from "react-router-dom"; function useKey(key, cb) { const callbackRef = useRef(cb); useEffect(() => { callbackRef.current = cb; }); useEffect(() => { function handle(event) { if (event.code === key) { callbackRef.current(event); } } document.addEventListener("keydown", handle); return () => document.removeEventListener("keydown", handle); }, [key]); } function App() { function handleArrowLeft() { console.log("Left"); } function handleArrowRight() { console.log("Right"); } useKey("ArrowLeft", handleArrowLeft); useKey("ArrowRight", handleArrowRight); return ( <div> <Switch> <Route exact path="/central-report" component={CentralReport} /> <Route path="/images" component={ImageSlideShow} /> <Route path="/maps" component={MapSlideShow} /> </Switch> {/* NavBar */} <Navigation /> </div> ); } export default App;Puede hacerlo simplemente agregando una matriz de rutas y usando el historial para redirigir y buscar la ubicación para el índice actual:
useEffect(() => { const currentIndex = paths.indexOf(location.pathname); if (currentIndex === 0) { setPrevRoute(paths.length - 1); } else { setPrevRoute(currentIndex - 1); } if (currentIndex === paths.length - 1) { setNextRoute(0); } else { setNextRoute(currentIndex + 1); } }, [location.pathname]); function handleArrowLeft() { history.push(paths[prevRoute]); } function handleArrowRight() { history.push(paths[nextRoute]); }Debido a que está utilizando un componente funcional, se prefieren los ganchos. Lo siguiente debería ayudarlo a seguir su camino, solo necesitará agregar algo de lógica para decidir qué ruta debe enviarse a la matriz de historial.
import { useHistory } from 'react-router-dom' function App() { const history = useHistory() function handleArrowLeft() { console.log("Left"); history.push("/path-to-the-left") } function handleArrowRight() { console.log("Right"); history.push("/path-to-the-right") } useKey("ArrowLeft", handleArrowLeft); useKey("ArrowRight", handleArrowRight); return ( <div> <Switch> <Route exact path="/central-report" component={CentralReport} /> <Route path="/images" component={ImageSlideShow} /> <Route path="/maps" component={MapSlideShow} /> </Switch> {/* NavBar */} <Navigation /> </div> ); }