反應路由器路由 <Link> v5

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您可以通過props.match.params.id檢查id是否存在。

Answer 2

起初，您在這里遇到問題，

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

由於您已經在映射數據數組中的事件對象，因此迭代器事件已經保存了事件數據。 所以你應該這樣改變它；

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

另外，我強烈建議您在路由中使用“精確”屬性，以從同一根路由多個端點，如下所示。

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

有關更多信息，請參見此處。 精確路徑與路徑之間的差異