reactjs - React路由器dom将数据从父组件传递到子路由器组件不传递props.match
问题描述
父组件 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 组件?
解决方案
这就是你使用组件道具的方式
<Route exact path="/book/:id" component={Book} />
考虑使用render
prop 而不是component
这样的 prop:
<Route exact path="/book/:id" render={(routeProps) => <Book user={user} {...routeProps} />} />
推荐阅读
- matplotlib - 是否可以在 matplotlib 图例条目中使用文本作为句柄?
- go - 如何在 Go 中获取指向 Interface{} 底层值的指针
- c# - 如何在 ASP.NET WebAPI 中诊断格式错误的 JObject?
- android - “URI 未注册(设置 | 语言和框架 | 模式和 DTD)”&“属性工具:此处不允许使用上下文”
- r - 如何根据其他数据框中的两个条件创建列?
- php - 如何使用 Eloquent 通过外键值从数据库中获取所有行?
- gradle - 是否可以在 JUnit5/Gradle 中选择使用标签组合注释的测试?
- c# - Algolia - 推送数据
- javascript - 如何在合并另一个属性的值的同时删除具有重复属性值的对象?
- rust - Rust 模块如何与同一命名空间中的 const 具有相同的名称?