通过箭头键导航路由器答案

【问题标题】：Navigating Router Through Arrow Keys通过箭头键导航路由器
【发布时间】：2021-11-03 14:41:27
【问题描述】：

正如标题所说，我实际上是在尝试通过使用循环列表中的左右箭头键来导航我的网页。每次按下右箭头，导航栏选择右边的下一个元素，每次按下左箭头，它选择左边的页面。

我已经创建了一个函数来检测左右箭头按键，但到目前为止它只是console.logs，我对路由器和开关不是很熟悉，所以我试图开发一些函数来改变操纵导航栏使用箭头键（同时保持选择能力）

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;

【问题讨论】：

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

因为您使用的是功能组件，所以首选钩子。下面的内容应该可以帮助您上路，您只需要添加一些逻辑来决定应该将哪个路径推送到历史数组。

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

【讨论】：

【解决方案2】：

您可以简单地通过添加路径数组来做到这一点，并使用历史推送来重定向，并获取当前索引的位置：

  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

【讨论】：