如何在路由参数中转义“/”？

Question

如果我有路线：

<Route path="Admin/Products/Edit/:id" ... />

我有一个呼叫网站，如：

const productId = "products/12345";
return <Link to="/Admin/Products/Edit/" + productId>...</Link>

如何转义productId以便react-router捕获整个值，包括斜杠作为单个值？

Answer 1

我认为有几种方法可以做到这一点：

1. 你可以这样做：

<Route path='Admin/Products/Edit/*' component={EditProduct} />

然后您可以使用this.props.params.splat获取您的：“products / 12345”，问题是*匹配所有字符（非贪婪）。

1. 或许更严格的事情如下：

<Route path='Admin/Products/Edit/*/*/' component={EditProduct} />

然后您需要记住，Link的路径需要以/结尾，例如：

const productId = "products/12345/";
return <Link to="/Admin/Products/Edit/" + productId>...</Link>

你得到一系列splats，所以你可以：this.props.params.splat.join('/')得到你的：“products / 12345”

您可以找到有关Route Matching in the docs的更多信息。