前提・実現したいこと
React + RailsでWebアプリケーションを作成中。
Reactで描画したページ内でページ内遷移をさせたい
以下の記事を参考に、react-router-hash-link を利用
【React Router】画面遷移時に#を用いて特定の要素に移動させる方法
ページ内の遷移先となる各要素に対してはidを振れている。
発生している問題・エラーメッセージ
以下の<HashLink smooth to={itemCategory.category_name}
のto以下の部分をいろいろと変更してみるもうまくいかず。。
該当のソースコード
React
1 2//遷移元となる各要素名を表示しているメニュー 3{props.shopItemCategories.map((itemCategory) => ( 4 <Typography component="h2" variant="h3" > 5 <MemoryRouter> 6 <HashLink smooth to={itemCategory.category_name} className={classes.scrollMenu}>{itemCategory.category_name}</HashLink> 7 </MemoryRouter> 8 </Typography> 9))} 10 11//遷移先となるページ内の各要素 12{props.shopItemCategories.map((itemCategory) => ( 13<> 14<Box> 15 <div className={classes.root}> 16 <Typography component="h2" variant="h3" id={itemCategory.category_name}> 17 {itemCategory.category_name} 18 </Typography> 19 </div> 20...
試したこと
エラー表示される:<HashLink smooth to=#{itemCategory.category_name}
エラー表示される:<HashLink smooth to={#itemCategory.category_name}
エラー表示される:<HashLink smooth to=#itemCategory.category_name
ディベロッパーツールでは、href=/カテゴリ名 となっているが、遷移はできない :<HashLink smooth to={itemCategory.category_name}
ディベロッパーツールでhrefが適切に設定されているか確認していますがどれもうまくいかず。遷移先となるidはcategory_nameが振れています。
補足情報(FW/ツールのバージョンなど)
基礎的なところですが、ご教授いただけると嬉しいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。