父组件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} />} />
当我将组件值从组件 = {Book} 设置为组件 = {() => 我收到错误:-
类型错误:无法读取未定义的属性“params”
那是因为我在 Book 组件中使用“props.match.params.id”。
如何将用户状态与 props.match 传递给 Book 组件?
这就是使用 component 属性的方式
<Route exact path="/book/:id" component={Book} />
考虑使用render
道具而不是component
像这样的道具:
<Route exact path="/book/:id" render={(routeProps) => <Book user={user} {...routeProps} />} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)