RelotoTop反応と反応ルータV 6

反応と反応ルータv 6を使用しているマルチページウェブサイトのページの上部へのナビゲーション
私は、ヘッダーとフッターのナビゲーションと反応して、マルチページプロジェクトをしました.ヘッダー上のナビゲーションは本当の挑戦ではありませんが、フッターナビゲーションは完全にまたは少なくとも少なくとも動作するようにいくつかの余分なコーディングが必要です.
フッターナビゲーション-チャレンジ
あなたはトップからこのウェブサイトに従っていました、そして、現在、あなたはサイトの底に達しました、そして、底で、若干のナビゲーションは他のページにあります.リンクのいずれかをクリックすると、ナビゲーションが必要なページに移動して動作します.しかし、私は、1つの理由または他のキーボードユーザーです.ページは右のページに移動しましたが、タブキーを押すと、新しいページの一番下にリダイレクトされていることがわかりました.
フィックス
アプリケーションのScrollTotop機能を作成します.jsファイル

import { useEffect } from 'react';
import {  Routes, Route , useLocation } from 'react-router-dom'
import Header from './pages/shared/Header';
import Footer from './pages/shared/Footer';
import Features from './pages/features/Features';
import Pricing from './pages/pricing/Pricing';
import Stories from './pages/stories/Stories';
import Home from './pages/home/Home';
import { DataProvider } from './pages/context/Context';
import './sass/App.scss';

function App() {

  const ScrollToTop = () => {
    const { pathname } = useLocation();
    console.log(pathname)
    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);

    return null;
  }

  return (
    <div className="App">
      <Header />

      <DataProvider>

          <ScrollToTop />
          <Routes>

            <Route path="/" element={<Home />} />
            <Route path="stories" element={<Stories />} />
            <Route path="features" element={<Features />} />
            <Route path="pricing" element={<Pricing />} />

          </Routes>

        <Footer />
      </DataProvider>

    </div>
  );
}

export default App;

この時点で、ナビゲーションをしようとすると、フォーカスはまだ下に滞在します.私は、私が可能な限りすべてをしたと仮定しました.この問題を解決するいくつかのより多くの手順.
ページに移動したときにフォーカスを持つ要素を見つけ、先頭にあるファイルの先頭に移動します.この要素の上でtabindex =- 1を書きます.
負の値(通常tabindex =“- 1”)は、要素がシーケンシャルキーボードナビゲーションを介して到達できないことを意味しますが、Javascriptまたは視覚的にマウスをクリックしてフォーカスすることができます.負の値は、特定のイベントに表示される画面コンテンツがオフの場合に便利です.ユーザは、キーボードを使用して否定的なtabindexでどんな要素にも集中することができません、しかし、スクリプトはそうすることができます.(ソース- MDN )
同じファイルにUserefをインポートします
「反応」からインポートします
コンポーネントに以下を含める

const homeMain = useRef()

    useEffect(() => {
        homeMain.current.focus()
    })

tabindexを持つ要素はref属性<main tabIndex="-1" ref={homeMain} >を追加します.これをすべてのページにしなさい.
プロジェクトへのGithubリンクは、ここにあります.のリンク
フロントエンドメンターチャレンジプロジェクトのリストについて