Navigating Router Through Arrow Keys-CodePudding

As the title says, I'm essentially trying to navigate my web page through the use of the left and right arrow keys in a circular list. Every time the right arrow is pressed, the navbar selects the next element to the right, every time the left arrow is pressed, it selects the page to the left.

I've created a function to detect left and right arrow keypress, but as of now it just console.logs, I'm not super familiar with the router and switch so im trying to develop some functions to change manipulate the navbar using the arrow keys (While maintaining the ability to select)

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;

CodePudding user response：

You can do that simply by adding array of paths, and use history push to redirect, and fetch location for current index:

  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]);
  }

Demo Base on your code

CodePudding user response：

Because you are using a functional component, hooks are preferred. The below should get you on your way, you'll just need to add some logic to decide what path should be pushed to the history array.

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>
  );
}