我有一个父亲组件（这是HousesGallery的子组件，正在接收显示API数据的道具），但是现在我想显示HouseDetail组件作为显示有关单击房屋的详细信息的地方。api需要房子的名字，所以我试图通过链接通过道具传递名字，但我不知道我在路线中还是其他地方缺少什么。
路线为的应用程序组件：
export default function App() {
return (
<div className="got-font">
<Router>
<div>
<Menu/>
</div>
<Switch>
<Route path="/detallecasa/:name">
<HouseDetail/>
</Route>
<Route path="/personajes">
<CharactersGallery/>
</Route>
<Route path="/casas">
<HousesGallery/>
</Route>
<Route path="/cronologia">
<Chronology/>
</Route>
<Route path="/">
<HomePage/>
</Route>
</Switch>
</Router>
</div>
);
}
父亲部分：
export default function HouseComponent(props) {
return (
<div className="container">
<div className="row">
{props.info.map((item, i) =>
item.logoURL ?
<Link to={{pathname: `/detallecasa/${item.name}`, query: {housename: item.name}}}
key={i} className="col-lg-2 col-md-4 col-sm-12 c-houses_div">
<figure className="c-houses_div_figure" key={i}>
<img className="c-houses_div_figure_img" src={item.logoURL} alt=""/>
<figcaption>
<h3>{item.name}</h3>
</figcaption>
</figure>
</Link> : null
)}
</div>
</div>
);
}
和子组件：
export default function HouseDetail(props) {
const [houseDetail, setHouseDetail] = useState([]);
useEffect(() => {
axios.get(process.env.REACT_APP_BACK_URL + "houses/" + props.match.params.housename)
.then(res => {
console.log(res.data)
setHouseDetail(res.data);
})
}, [])
return (
<div className="">
<div className="container">
<div className="row">
{houseDetail.map((item, i) =>
<div key={i} className="">
<figure className="" key={i}>
<img className="" src={item.logoURL} alt=""/>
<figcaption>
<h3>{item.name}</h3>
</figcaption>
</figure>
</div>
)}
</div>
</div>
</div>
);
}
的Link的to道具对象不采取query财产，但你可以通过在路由状态附加数据
<Link
to={{
pathname: `/detallecasa/${item.name}`,
state: { housename: item.name }, // <-- Pass route state, if you wanted to
}}
... // other props, etc..
>
...
</Link>
该问题更多地与您如何尝试在渲染的组件中引用路线的匹配参数有关。
根据路径中的名称访问路由匹配参数Route，即name。
<Route path="/detallecasa/:name"> // <-- match param is `name`
<HouseDetail/>
</Route>
正确访问，即props.match.params.name。
useEffect(() => {
axios.get(process.env.REACT_APP_BACK_URL + "houses/" + props.match.params.name)
.then(res => {
console.log(res.data)
setHouseDetail(res.data);
})
}, []);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句