【React】ルーティングした際にpropsを渡す方法

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

ルーティングした際にpropsを渡す方法

以下のように記述することでルーティングした際にpropsを渡すことができます。
ルーティングはreact-router-dom v6で設定しています。

App.jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { User } from './containers/User';


function App() {
  return (
    <Router>
    {/* <Router>で<Routes>を囲む */}
    <Routes>
      {/* path="Url" element={コンポーネント} */}
      {/* urlに:keyを記述 */}
      <Route path="user/:id" element={<User />} />
    </Routes>
  </Router>
  );
}
export default App;

User.jsx

import React from 'react'
import { useParams } from 'react-router-dom'

export const User = () => {
  // useParamsでパラメーターを受け取ることができる
  const { id } = useParams()
  return (
    <>
      <div>ユーザー情報画面</div>
      <p>ユーザーIDは{id}です。</p>
    </>
  )
}