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

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?

CodePudding user response：

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;

CodePudding user response：

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>
  )
}