从 URL 中删除“%20” - React-Router

Question

我正在使用 React，但遇到了一个问题，尽管是一个美观问题而不是功能问题。

我正在从名称 API 生成

react-route

。该路线工作正常，但由于名称有空格，它们在网址中显示为：

example.com/lookup/David%20Attenborough

示例：

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

有没有一种聪明的方法可以删除空格：

example.com/lookup/DavidAttenborough

，甚至用

+

或

-

来替换空格，而不会失去

react-router

的结构完整性。

Answer 1

实际上，

+

作为路径中空格的编码无效，仅在查询字符串中有效。请参阅 何时将空格编码为加号 (+) 或 %20？ 和 https://github.com/ReactTraining/react-router/issues/2407

你不能做你所要求的事情

Answer 2

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

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

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

您可以添加 + 或 -

Answer 3

这对我有用：

<Link to={`/lookup/${props.data.name.split(` `).join(`-`).toLowerCase()}`}>{props.data.name}</Link>