search

RuralTechCoLtd / Homepage

0 stars 0 forks source link

Header(Material UI)の挙動とスタイリングの実装 #25

Open DaigoOgasawara opened 2 years ago

DaigoOgasawara commented 2 years ago

React,React-Router,Material @@UIを使ってサイト内リンクを実装する（実現できない場合は代替の案を検討する。） トップページでは自動スクロールを、詳細ページでは、画面遷移と自動スクロールを実装する。 @mkiyooka @RuralTechCoLtd

mkiyooka commented 2 years ago

react-router-hash-linkというのを使うと、期待の実装ができるようです。

yarn add react-router-hash-link
yarn add @types/react-router-hash-link
+ import { HashLink } from "react-router-hash-link";

- <ListItem button key={navlist[1]} component={NavLink} to="/">
+ <ListItem button key={navlist[1]} component={HashLInk} to="/#Services">

ページトップへのスクロールは同じくHashLinkを使い、リンク先の指定に#のみを指定すれば良いです。

          <ListItem button key={navlist[5]} component={NavLink} to="/">
          <ListItem button key={navlist[5]} component={HashLink} to="/#">