React路由器dom将数据从父组件传递到子路由器组件不通过props.match [英] React router dom passing data from parent component to child router component does not pass the props.match
问题描述
父组件App.js的内容:-
import React, { useEffect, useState } from "react";从./components/NavBar"导入导航栏;从./pages/Signup"导入注册;从./pages/Home"导入主页;从./pages/Book"导入图书;功能应用(){const [user, setUser] = useState();useEffect(() => {const token = "Bearer";+ sessionStorage.getItem(令牌");如果(令牌){公理.get(process.env.REACT_APP_API_URL +用户/自我",{标题:{授权:令牌,内容类型":应用程序/json",},}).then((res) => setUser(res.data));}}, []);返回 (<div className="container-fluid"><NavBar user={user}/><路由精确路径=/";组件={Home}/><路由路径="/signup";组件={注册}/><路由精确路径="/book/:id";组件={() =><Book user={user}/>}/>
);}导出默认应用程序;
对于路线:-
<路由精确路径=/book/:id"组件={() =><Book user={user}/>}/>
当我将组件值从 component={Book} 设置为 component={() =>我有一个错误:-
<块引用>TypeError: 无法读取未定义的属性 'params'
那是因为我使用的是props.match.params.id"在 Book 组件中.
如何将带有 props.match 的用户状态传递给 Book 组件?
component
prop 不是函数.使用 render
而不是 component
属性.
render
prop 是一个函数,路由器 props 对象作为参数传递给它.您可以将这些路由器道具传递给您的组件.
<路由精确路径=/book/:id"渲染={(道具)=><Book user={user} {...props}/>}/>
请参阅 react 路由器文档,了解有关 渲染
道具
Content of the parent component 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;
For the route :-
<Route exact path="/book/:id" component={() => <Book user={user} />} />
when i set the component value from component={Book} to component={() => i got an error :-
TypeError: Cannot read property 'params' of undefined
That is because i am using "props.match.params.id" inside the Book component.
How can i pass user state with props.match to he Book component ?
component
prop isn't a function. Use render
instead of component
prop.
render
prop is a function to which router props object is passed as an argument. You can pass these router props to your component.
<Route exact path="/book/:id" render={(props) => <Book user={user} {...props} />} />
See react router docs for details on render
prop
这篇关于React路由器dom将数据从父组件传递到子路由器组件不通过props.match的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!