在函数组件中无法访问 props

IT技术 reactjs react-router react-router-dom
2021-05-16 08:55:55

内部user.js文件中的props为空我无法访问matchprops。我不明白为什么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。我不明白为什么props要作为空对象出现。

2个回答

该User组件没有传递任何props：

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

随着路路由组件在渲染react-router-DOM 6.x版现在他们不再传递props（history，location，和match，或任何其他人），而这些必须的，现在通过其各自的挂钩进行访问。

然而，路由参数是通过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>
  )
}

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

其它你可能感兴趣的问题
上一篇响应式props值在 MUI v5 中不起作用 下一篇在我的 React SharePoint 现代 Web 部件中使用危险的 SetInnerHTML 的安全方法