Closed2022/04/17にクローズ1

【Next.js React】リンクリストからPJファイル内他ページへ遷移させる際、簡潔な記載方法

Next.js

React

hiro

#何について書くか？

-リンク用のコンポーネントでリンク毎に異なるルーティング用メソッドが存在していたため、一つにまとめて記載できるようにした記録。

#内容

結論

onClick イベントに引数を渡す形で解決。

改善前

const LinkList = (classes) =>{

  const method1 = () => {
    Router.push('/route1')
  }

  const method2 = () => {
    Router.push('/route2')
  }


  return(
    <>
      <ListItem button onClick={method1} className={classes.nested}>
        <ListItemIcon>
          <BusinessIcon />
        </ListItemIcon>
      <ListItemText primary="テスト1" />
      </ListItem>
      <ListItem button onClick={method2} className={classes.nested}>
        <ListItemIcon>
          <BusinessIcon />
        </ListItemIcon>
      <ListItemText primary="テスト2" />
      </ListItem>
   </>
  )
}
export default LinkList

改善後

const LinkList = (classes) =>{

  const listRouting = (url) => {
    Router.push(url)
  }


  return(
    <>
      <ListItem button onClick={() => listRouting("/route1")} className={classes.nested}>
        <ListItemIcon>
          <BusinessIcon />
        </ListItemIcon>
      <ListItemText primary="テスト1" />
      </ListItem>
      <ListItem button onClick={() => listRouting("/route2")} className={classes.nested}>
        <ListItemIcon>
          <BusinessIcon />
        </ListItemIcon>
      <ListItemText primary="テスト2" />
      </ListItem>
   </>
  )
}
export default LinkList

#参考サイト

このスクラップは2022/04/17にクローズされました