Question

我试图了解嵌套的反应路线。我当前的问题是我的链接输出未定义，并且还将组件呈现在同一视图上，而不是仅加载该组件视图。

Events.js

const data = {
   "events":[
      {
         "id":"1234",
         "name":"Meetup",
         "description":"Tech meetup"
      },
      {
         "id":"34234",
         "name":"Test",
         "description":"Events"
      }
   ]
}

{data.events.map(event => (
    <Link to={`/events/${data.events.id}`}>
        <EventCard data={event} />
    </Link>
))}

<Switch>
  <Route path={`/events/:eventId`}  render={(props) => <Event {...props}  />}/>
</Switch>

当用户单击事件卡之一时，如何呈现事件组件。我目前可以在同一页面上加载这两个组件，但这不是我想要的输出。预期路径应为：

预期：

仅渲染

当前：

渲染和在同一页面上

Answer 1

您需要向事件端点添加id参数：

 <Route path="/events/:id?" component={Event} />

然后在Event中，您可以通过id检查是否存在props.match.params.id。

Answer 2

起初，您在这里遇到问题，

<Link to={`/events/${data.events.id}`}>

由于您已经在映射数据数组中的事件对象，所以迭代器事件已包含事件数据。所以你应该这样改变它；

<Link to={`/events/${event.id}`}>

此外，我强烈建议在您的路由中使用“精确”属性，以从同一根路由这样的多个终结点。

<Route exact path={`/events/:eventId`}  render={(props) => <Event {...props}  />}/>

有关更多信息，请参见此处。 Difference between exact path and path

react-router路由<Link> v5

2 个答案: