【React】画面遷移先に値を渡そうとしているが結果がnullになってしまう。

Question

前提

画面遷移の前にサムネイルのサイズ（今回は幅だけ）を取得し、画面遷移先でその値を取得しようと試みているが取得できる値がnullになってしまう。Template.jsの12行目の結果でnullになってしまう。

実現したいこと

HomePage.jsで取得したサムネイル画像の表示されているサイズを取得し、Template.jsでその値を取得してアニメーションのInitialとして使いたい。

該当のソースコード

HomePage.js

import Thumbnail from '../components/Thumbnail';
import EmptyImage from '../images/empty.webp';
import SectionTitle from '../components/SectionTitle';
import { Link } from 'react-router-dom';

// This compornent has function of showing each work thumbnails and links.


function HomePage() {

  const elm = useRef(null); 
  const [state, setState] = useState(0); 

//ここでサムネイル画像のサイズ（横幅）を取得している
  useEffect(() => {
    if (elm.current) {
        const { clientWidth: thmbnaiilWidth } = elm.current;
        setState(thmbnaiilWidth);
    }
  }, []);

  //Click時に値が取れているか
  const checkClick = () =>{
    console.log(state);
  }


  return (
    <div className='home-page'>
        <SectionTitle title={'Works'} />

        <div className='container'>
          <div className='list-container'>
            <div className='thumbnails' ref={elm}>
            <Link to={{pathname: '/template', state: { test: state }}} onClick={checkClick}>　//Template.jsに値を渡す
              <Thumbnail thumbnailImage={EmptyImage} workTitle={'Work Title'} category={'Category'}/> 
              </Link>
            </div>
          </div>

        </div >
        <SectionTitle title={'Test'} />
    </div>
  )

}

export default HomePage

Template.js

import { useLocation } from 'react-router-dom';

//images
import EmptyImage from '../images/empty.webp';

const transition = { duration: 2, ease: [0.6, 0.01, -0.05, 0.9] }; //Animationのスピード


const Template = () => {

  const location = useLocation();
  console.log(location.state);

  return (
    <motion.div 
    initial={{opacity: 0}}
    animate={{opacity: 1}}

    className='work-detail-page'>
      <div className='container'>

        <motion.img 
        initial={{width: `${location.state?.test || 0}px`, height:"20px"}}//ここに取得したコンテナの幅や高さを持ってくる
        animate={{width:"100%", height:"100%", transition: { delay: 0, ...transition }}} 
        
        className='hero-img' 
        src= {EmptyImage} 
        alt='test-images'/>
s
        <div className='work-contents'>

          <div className='title-section'>
            <h1>Title</h1>

            <div className='info'>
              <h4>サンプル</h4>
            </div>

            <p className='work-text'>サンプルテキスト</p>
          </div>
        </div>

      </div>
    </motion.div>
  )
}

export default Template

試したこと

値の渡し方をuseNavigate + useLocationで試したが同じ結果であった。
クリック時にはまだ値は正常に取得できているが、遷移先の写ったタイミング（Template.jsの12行目）の結果でnullになってしまう。

補足情報（FW/ツールのバージョンなど）

使用しているバージョン
├── framer-motion@8.4.3
├── react-dom@18.2.0
├── react-router-dom@6.5.0
├── react-scripts@5.0.1
├── react@18.2.0

Comments

[hoshi-takanori]

<Link to='/template' state={{ test: state }} 〜 > かな。
https://stackoverflow.com/questions/70214766/i-can-not-get-the-state-from-react-router-link-component-using-uselocation-so-h

[caren]

できるかどうかわかりませんが、下記のサイトでは

<Link to={"/about"} state={{ test: "test" }}>　のようにstateを渡しています。

https://zenn.dev/lilac/articles/c40b35fe3184da

Answer 1

こちらで問題を解決できました。どうもありがとうございます！

hoshi-takanori
2023/01/26 06:17

<Link to='/template' state={{ test: state }} 〜 > かな。 https://stackoverflow.com/questions/70214766/i-can-not-get-the-state-from-react-router-link-component-using-uselocation-so-h