Javascript 如何将道具传递到路线组件？

（我是React路由器初学者，请原谅我的任何错误，我的第一个堆栈溢出问题。）

我的问题 我有这样一段代码，我想使用map函数从一个数组（courseData）中呈现一个文章列表，当单击一个时，我想路由到该课程的子页面并呈现一个组件，其中包含单击文章的id和标题

我似乎不知道单击时如何传递这些道具，因为我对元素了解不多，但在网上找不到太多

我还想知道什么是放置所有路线的最佳位置。我把一个元素放在一个更高的组件中，它几乎包含了所有的路由。这是好的做法吗？ 由于404路由位于更高的组件中，因此我遇到了让自定义404路由显示而不是该路由的错误。这是一个容易解决的问题吗

我试图通过传递render属性而不是component属性来传递中的道具，但我无法访问需要传递的道具

我的代码

const courseData=[
{id:1，标题：'角度-完整指南'}，
{id:2，标题：“Vue-完整指南”}，
{id:3，标题：'PWA-完整指南'}，
];
常数课程=（）=>{
const courses=courseData.map（课程=>{
返回(
{课程名称}
);
});
返回(
这是我的课程
{courses}
);
};

LazyLoad只是一个HOC，它将传递的组件包装在标记中并传递其道具，这样我就可以延迟加载这个组件。我已确认延迟加载不是问题。

---

如果有人能帮我实现这一点，那就太棒了。

你可以做如下事情

使用组件道具

}}/>

使用渲染道具

}/>

你可以阅读更多关于它的内容

---

假设您的HOC正确地传递了收到的道具，这应该是可行的：

<Route exact path='/courses/:id' component={(routerProps) => LazyLoad(Course)({id: course.id, title: course.title, ...routerProps})} />

LazyLoad（Course）（{id:Course.id，title:Course.title，…routerProps}}/>

问题中的组件被包装到HOC中。它是否会改变答案（语法）？是的，因为现在您必须处理嵌套组件，而不是直接传递道具。

 <Route exact path='/courses/:id' component={() => <Course someProp={abc}/>}} />

<Route exact path='/courses/:id' render={(props) => <Course someProp={abc} />} />

<Route exact path='/courses/:id' component={(routerProps) => LazyLoad(Course)({id: course.id, title: course.title, ...routerProps})} />