功能组件中无法访问道具答案

【问题标题】：props are not accessible in the function component功能组件中无法访问道具
【发布时间】：2021-11-09 14:16:59
【问题描述】：

在user.js 文件中，道具是空的，我无法访问道具中的match。我不明白为什么props 会以空对象的形式出现。

App.js 文件

import "./App.css"
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'

import Home from "./components/Home";
import About from "./components/About";
import User from "./components/User";


function App() {

  return (
    <div className="container">
      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/user/john">User</Link>
          </li>
        </ul>
        <div>
          <Routes>
            <Route exact path="/" element={<Home/>}></Route>
            <Route exact path="/about" element={<About/>} ></Route>
            <Route exact path="/user/:name" element={<User/>}></Route>
          </Routes>
        </div>
      </Router>


    </div>
  );
}

export default App;

user.js 文件

import React from 'react'

function User({match}){
    return (
        <div>
            User - {match.params.name}
        </div>
    )
}

export default User

在user.js 文件中，道具变为空我无法访问props 中的match 对象。我不明白为什么props 会以空对象的形式出现。

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

User 组件未传递任何道具：

element={<User/>} // <-- no props are passed to User

随着路由组件在 react-router-dom v6.x 中的呈现方式，现在它们不再被传递 props（history、location 和 match，或任何其他 ) 并且这些必须现在可以通过它们各自的钩子访问。

history 对象现在是 navigate 函数并通过 useNavigate 访问
location 通过useLocation 访问的对象
match 通过useMatch 访问的对象

然而，路由参数直接通过useParms钩子访问！

对于给定路线：

<Route exact path="/user/:name" element={<User/>} />

User可以使用useParams钩子访问name路由路径参数：

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

function User() {
  const { name } = useParams();

  return (
    <div>
      User - {name}
    </div>
  )
}

【讨论】：

感谢您的解决方案，我会尝试这种方式

【解决方案2】：

您必须使用钩子useMatch hook 才能访问当前匹配项。

【讨论】：