使用参数重定向到页面

Question

我希望有一个页面，其中包含使用/recordings访问的录制列表。通过点击我希望被重定向到该录音的页面/recording/:recordingId的任何录音。

我有以下路线，使用＆＃39; react-router＆＃39;：

                <Route path="recordings" component={RecordingList}/>
                    <Route path="recording/:recordingId" component={Recording}/>
                </Route> 

在RecordingList反应组件中，每个记录都有以下链接：

  var recordingsHtml = new Array()
  recordings.forEach(function(value, i) {
      recordingsHtml.push(
        <li key={i} style={{clear: "both"}}>
          <Link to={"recording"} params={{recordingId: i}}>{value.title}</Link>
        </li>
      );
  });

所以我希望当我点击第一个链接时，我会被重定向到recording/1。

但是，我被重定向到/recording所以没有任何ID的URL。 另外，我收到此消息：

Location "recording" did not match any routes

那么如何才能使链接正常运行？

Answer 1

根据您使用的反应路由器的版本，解决方案可能会有所不同。 Url params目前在传递给道具to的对象中提供。必须填写对象属性query。