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

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} />

那么您需要记住您的Links 路径需要以/ 结尾，例如：

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的信息。