React Router V4中如何转义路径中的冒号(:)字符？

我明白你遇到的困扰了——你的URL里带有冒号，想要精准匹配/foo/bar/main:home到Home组件，其他同前缀带冒号的路径匹配到Default组件，但之前的写法要么全命中Home，要么全走Default。

先说说你之前写法的问题：

• 第一种写法里，React Router会把路径中的:home识别成动态参数，而不是字面量的冒号加home，所以任何以/foo/bar/main开头的路径都会匹配这个路由，导致所有请求都走Home组件。
• 第二种用URL编码%3A的方式行不通，因为Router匹配的是解码后的路径，而且你的Default路由还是用了动态参数，所以反而全命中了Default。

给你两个可行的解决办法，根据你用的React Router版本来选：

如果你用的是React Router v5及以下 #

最直接的方式是给Home路由加上exact属性，让它只匹配完全一致的路径：

<Route path="/foo/bar/main:home" exact component={Home} />
<Route path="/foo/bar/main:any" component={Default} />

exact会强制路由只有在路径完全匹配时才触发，这样/foo/bar/main:home会精准命中Home，而/foo/bar/main:about_us、/foo/bar/main:contact_us这些路径会匹配到带动态参数:any的Default路由。

如果还是有问题，你也可以用转义冒号的方式，把冒号当成字面量匹配：

<Route path="/foo/bar/main\:home" component={Home} />
<Route path="/foo/bar/main\::rest" component={Default} />

这里的\:会告诉Router把冒号当成普通字符，而不是动态参数的开头。

如果你用的是React Router v6 #

v6默认就是精确匹配，而且去掉了component属性改用element，写法更简洁：

<Route path="/foo/bar/main:home" element={<Home />} />
<Route path="/foo/bar/main:*" element={<Default />} />

main:*会匹配所有以/foo/bar/main:开头的路径，完美覆盖你需要的Default场景。

内容的提问来源于stack exchange，提问作者Amir