反应路由 URL Link 作为参数

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

Answer 2

您只需要编码 URI 以在查询字符串中传递 url。

您可以使用 encodeURIComponent() 对 URL 进行编码，并使用 decodeURIComponent() 以 url 格式检索

然后您可以使用 this.props.params.match.url

访问它

const url = encodeURIComponent(this.props.params.match.url)

反应路由 URL Link 作为参数

React Routing with URL Link as params

reactjs

react-router

react-router-v4