从 URL 中删除 '%20' - React-Router

Question

我在使用 react 时遇到了一个问题，尽管是美学问题而不是功能问题。

我正在从名称 API 生成 react-routes。该路线工作正常，但由于名称有空格，它们在 url 中显示为：example.com/lookup/David%20Attenborough

示例：<Link to='{/lookup/' + props.data.name}>{props.data.name}</Link>

有没有一种聪明的方法可以删除空格：example.com/lookup/DavidAttenborough 甚至使用+ 或- 来替换空格，而不会失去react-router 的结构完整性。

Answer 1

实际上，+ 作为路径中空格的编码无效，仅在查询字符串中有效。见When to encode space to plus (+) or %20?和https://github.com/ReactTraining/react-router/issues/2407

你不能按照你的要求去做

Answer 2

您可以使用正则表达式在网址中添加（- 或 +） 例子

let name = props.data.name;
name = name.replace(/\s+/g, '-');
const url = `/lookup/${name}

<Link to={url}>{props.data.name}</Link>

您可以添加 + 或 -