如何逃脱“/"在路由参数中?

问题描述

如果我有路线:

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

我有一个呼叫站点，例如:

and I have a callsite such as:

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

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

How do I escape productId so that react-router captures the whole value, including the slash as a single value?

推荐答案

我认为有以下几种方法:

I think there are a few ways of doing this:

1. 您可以执行以下操作:

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

然后您可以使用 this.props.params.splat 来获取您的:products/12345"，问题在于 * 匹配所有字符(非-贪婪).

then you could use this.props.params.splat to get your: "products/12345", problem with that is that * matches all characters (non-greedy).

1. 或者可能更严格一些，例如:

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

那么你需要记住你的Link的路径需要以/结尾，例如:

then you need to remember that your Links path needs to end with /, e.g.:

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

然后你会得到一个 splats 数组，所以你可以这样做:this.props.params.splat.join('/') 得到你的:products/12345"

and you get an array of splats, so you could do: this.props.params.splat.join('/') to get your: "products/12345"

你可以找到更多关于路由匹配的信息文档.

这篇关于如何逃脱“/"在路由参数中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！