React路由器dom将数据从父组件传递到子路由器组件不传递props.match答案

【问题标题】：React router dom passing data from parent component to child router component does not pass the props.matchReact路由器dom将数据从父组件传递到子路由器组件不传递props.match
【发布时间】：2020-06-23 19:14:56
【问题描述】：

父组件App.js的内容：-

import React, { useEffect, useState } from "react";
import NavBar from "./components/NavBar";
import Signup from "./pages/Signup";
import Home from "./pages/Home";
import Book from "./pages/Book";

function App() {
  const [user, setUser] = useState();
  useEffect(() => {
    const token = "Bearer " + sessionStorage.getItem("token");
    if (token) {
      axios
        .get(process.env.REACT_APP_API_URL + "user/self", {
          headers: {
            Authorization: token,
            "Content-Type": "application/json",
          },
        })
        .then((res) => setUser(res.data));
    }
  }, []);

  return (
    <div className="container-fluid">
      <NavBar user={user} />
      <Route exact path="/" component={Home} />
      <Route path="/signup" component={Signup} />
      <Route exact path="/book/:id" component={() => <Book user={user} />} />
    </div>
  );
}

export default App;

路线：-

<Route exact path="/book/:id" component={() => <Book user={user} />} />

当我将组件值从 component={Book} 设置为 component={() => 时出现错误：-

TypeError: 无法读取未定义的属性“参数”

那是因为我在 Book 组件中使用了“props.match.params.id”。

如何通过 props.match 将用户状态传递给 Book 组件？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

这就是你使用组件道具的方式

<Route exact path="/book/:id" component={Book} />

考虑使用render 属性而不是component 属性，如下所示：

<Route exact path="/book/:id" render={(routeProps) => <Book user={user} {...routeProps} />} />

【讨论】：

【解决方案2】：

component prop 不是函数。使用render 而不是component 属性。

render prop 是一个函数，路由器 props 对象作为参数传递给该函数。您可以将这些路由器道具传递给您的组件。

<Route
  exact
  path="/book/:id"
  render={(props) => <Book user={user} {...props} />} 
/>

有关render 道具的详细信息，请参阅react router docs

【讨论】：

当 Book 组件中的 console.log(props.user) 进入控制台未定义时，我将相同的“用户”状态传递给 NavBar 组件，正如您从我的问题中看到的那样，我得到了一个NavBar 组件中 console.log 的值
确保您在发出 HTTP 请求时没有在控制台中收到任何错误。还要在 Promise 链的末尾添加一个 catch 块来捕获请求期间的任何错误
我没有收到任何错误，我也可以看到在 NavBar 组件中成功呈现的用户名