Reactで別のcomponent中の特定箇所にlinkを貼る。

4036 ワード
react-router react-router-hash-link React anchor React テキストリンク

問題 | ReactでSPAを作ったとき、ページ内の特定の箇所に飛ばせたかったのでanchorを使ったが、別コンポーネントからは効かなかった。

解決策 | react-router-hash-linkで行けた! : 備忘録も兼ねて詳しくどこをどうしたかを記します。

状況説明

Reactで"/"というURLにアクセスしたときはHomeというコンポーネントを、"/foo"にアクセスしたときはFooを、"/Hoge"にアクセスしたおきはFogeを表示するようにreact-router-domを使ってルーティングを以下のように設定。

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Foo from './components/Foo';
import Hoge from './components/Hoge';

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path="/foo">
                    <Foo />
                </Route>
                <Route path="/hoge">
                    <Hoge />
                </Route>
                <Route>Not Found</Route>
            </Switch>

            <GlobalStyles />
        </BrowserRouter>
    );
}

さらに各コンポーネントに、以下のナビゲーション内容を持つHeaderというコンポーネントをimport。(Linkでもいいのですが、選んだ時にactiveStyleを適用できるよう、NavLinkを使っています。）

import React from 'react';
import { NavLink } from 'react-router-dom';

  <NavLink 
      activeStyle={{ borderBottom: '1px solid black' }}
      exact to="/"
  >
      Home
  </NavLink>

  <NavLink 
      activeStyle={{ borderBottom: '1px solid black' }}
      exact to="/foo"
  >
      Foo
  </NavLink>

  <NavLink 
      activeStyle={{ borderBottom: '1px solid black' }}
      exact to="/hoge"
  >
      Hoge
  </NavLink>

　Homeコンポーネント中のAboutという箇所に各コンポーネントのHeaderから飛べるようにしたい！

  • anchorはHome以外のコンポーネントからは効かないので調べると、react-router-hash-linkが使えることが判明。そこで、、、
    • yarn add react-router-hash-linkでdependencyを追加。
    • Headerの中に、NavHashLinkを使ってAboutを追加。
    • スムーズに移動できるので、smoothというプロパティを追加。
    • App.jsは変更不要。
    • 飛ばしたい先の要素にid="about"とつける。

Header.js

import { NavHashLink } from 'react-router-hash-link'; ←importする。

 <NavLink 
      activeStyle={{ borderBottom: '1px solid black' }}
      exact to="/"
  >
      Home
 </NavLink>

 <NavHashLink　　　　　　　　　　　　　　　　　　　　　　　←ここを追加。
      smooth
      activeStyle={{ borderBottom: '1px solid black' }}
      to="/#about"
  >
      About
 </NavHashLink>
   {/*　以下省略　*/}

これで、別のコンポーネントから、Homeコンポーネント中の特定箇所に飛ぶようになりました。

今回もいろいろなサイトを参考にさせていただきました。ありがとうございました。