javascript - 重定向到带有参数的页面

Question

我想要一个包含通过 /recordings 访问的录音列表的页面。通过单击任何录音，我希望重定向到该录音的页面 /recording/:recordingId。

我有以下路线，使用“react-router”制作:

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

在 RecordingList react 组件中，每个录音都有以下链接:

  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，因此 URL 没有任何 id。 另外，我收到此消息:

Location "recording" did not match any routes

那么如何才能使链接正常工作呢？

Answer 1

根据您使用的React Router版本，解决方案可能会有所不同。 Url params当前在传递给 props to 的对象中给出。必须填写对象属性query。