如何通过react-router-dom-6上的组件获取参数

Question

我是 React JS 的新手。我正在学习 React Router dom 版本 6。我遇到了问题。我没有通过组件获取参数。

这是我的代码：

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;

我通过 React Developer Tools 分机得到这个：

{
  "children": "<MovieForm />",
  "value": {
    "outlet": null,
    "matches": [
      {
        "params": "{id: \"5b21ca3eeb7f6fbccd471816\"}",
        "pathname": "/movies/5b21ca3eeb7f6fbccd471816",
        "pathnameBase": "/movies/5b21ca3eeb7f6fbccd471816",
        "route": "{caseSensitive: undefined, element: <MovieForm />, …}"
      }
    ]
  }
}

如何访问参数？

Answer 1

您可以使用 useParams 访问 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

您可以使用 react-router-dom 提供的钩子 useParams

因此，要访问您的 id 参数，您必须进入 MovieForm 组件并在那里使用它

import { useParams } from 'react-router-dom';
    
const MovieForm = props => {
  const { id } = useParams();

  console.log(props);
  return (
    <div className="container">
      <h1>Movie Form </h1>
    </div>
  )
}

如何通过react-router-dom-6上的组件获取参数

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

reactjs

react-router-dom