reactjs - 以 URL 链接作为参数的 React 路由

Question

如何设置这样的路线。

<Route path='/:id/:url' component={Url}/>

然后在 Url 组件中访问这个 url 的值。

const url = this.props.params.match.url

所以如果我传入 http://localhost:3000/245/http://www.msn.com

我将能够通过 props.params 获取此 url 值。

Answer 1

您可以使用 encodeURIComponent

对您的 URL 进行编码以删除斜杠和其他 URL 特定符号

因此对于您的情况，它将是 const urlEncoded = encodeURIComponent(http://www.msn.com) 然后将此值传递给您的 URL 应该导致 http://localhost:3000/245/http%3A%2F%2Fwww.msn.com 您可以使用 this.props.params.match.url

访问