我的问题

Question

（我是React Router的初学者，如有任何错误，请原谅我，这是我的第一个堆栈溢出问题。）

我的问题

我有这段代码，我想使用map函数从数组（courseData）渲染文章列表，当单击一个时，我想路由到该课程的子页面并使用点击的文章的ID和标题。

我似乎无法为点击时如何传递这些道具全神贯注，因为我对该元素了解不多，但在网上找不到太多。

我也想知道什么是放置所有路线的最佳地点。我将元素放在较高的组件中，该组件中几乎包含所有路由。这是好习惯吗？我遇到了使我的自定义404路由而不是路由显示出来的错误，因为404路由位于较高的组件中。这很简单吗？

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

我的代码

const courseData = [
  { id: 1, title: 'Angular - The Complete Guide' },
  { id: 2, title: 'Vue - The Complete Guide' },
  { id: 3, title: 'PWA - The Complete Guide' },
];

const Courses = () => {
  const courses = courseData.map(course => {
    return (
      <Link
        to={'/courses/' + course.id}
        className={style.course}
        key={course.id}
      >
        <article>{course.title}</article>
      </Link>
    );
  });

  return (
    <div>
      <h1>Amazing Udemy Courses</h1>
      <section className={style.courses}>{courses}</section>
      <section />

      <Route exact path='/courses/:id' component={LazyLoad(Course)} />
    </div>
  );
};

LazyLoad只是将传递的组件包装在标签中并传递其prop的HOC，以便我可以延迟加载该组件。我已经确认延迟加载不是问题。

如果有人可以帮助我使它正常工作，那将是很棒的事情。

Answer 1

您可以执行以下操作。

使用道具道具

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

使用渲染道具

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

您可以阅读更多有关它的信息

Answer 2

如果您的HOC正确传递了收到的道具，这应该可以工作：

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

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

我的问题

我的代码

2 个答案:

使用道具道具

使用渲染道具