How to get parameters through component on react-router-dom-6 - reactjs

Question

I am new to React JS. I am learning react router dom version 6. I am having an problem. I am not getting parameters through components.
Here is my codes:
App.js
import React, { Component } from 'react';
import './App.css';
import Movies from './components/movies';
import Customers from './components/customers';
import Rentals from './components/rentals';
import NotFound from './components/not-found';
import Navbar from './components/navbar';
import MovieForm from './components/movieform'
import { Route, Routes, Navigate } from 'react-router-dom';
class App extends Component {
render() {
return (
<main>
<Navbar />
<Routes>
<Route path='/movies/:id' element={<MovieForm />} />
<Route path="/" element={<Navigate replace to="/movies" />} />
<Route path="/movies" element={<Movies />} />
<Route path="/customers" element={<Customers />} />
<Route path="/Rentals" element={<Rentals />} />
<Route path="*" element={<NotFound />} />
</Routes>
</main>
);
}
}
export default App;
moviesform.jsx
import React from 'react';
const MovieForm = props => {
console.log(props);
return (
<div className="container">
<h1>Movie Form </h1>
</div>
)
}
export default MovieForm;
I get this through React Developer Tools extension:
{
"children": "<MovieForm />",
"value": {
"outlet": null,
"matches": [
{
"params": "{id: \"5b21ca3eeb7f6fbccd471816\"}",
"pathname": "/movies/5b21ca3eeb7f6fbccd471816",
"pathnameBase": "/movies/5b21ca3eeb7f6fbccd471816",
"route": "{caseSensitive: undefined, element: <MovieForm />, …}"
}
]
}
}
How can I access the parameters?

Answer 1

You can use useParams to access params in react-router-dom v6
import React from 'react';
import { useParams } from 'react-router-dom';
const MovieForm = () => {
const params = useParams();
console.log(params);
return (
<div className="container">
<h1>Movie Form </h1>
</div>
)
}
export default MovieForm;

Answer 2

You can use the hook that react-router-dom provides called useParams
So to access your id parameter you'll have to go into your MovieForm component and use it there
import { useParams } from 'react-router-dom';
const MovieForm = props => {
const { id } = useParams();
console.log(props);
return (
<div className="container">
<h1>Movie Form </h1>
</div>
)
}