Question

我在React Router中发现了一个潜在的错误。在我的组件中，我这样做：

if(this.props.location.pathname === "/home")

检查用户是否在路径上。这可能是错误的，因为如果用户手动输入URL（例如example.com/home /

），则上述条件为false

如何处理这种情况？像这样做多次检查是很丑的：

if(this.props.location.pathname === "/home" || this.props.location.pathname === "/home/"))

关于如何更好，更清洁地进行此操作的任何建议？

Answer 1

根据您要实现的目标，可以混合使用exact和strict属性。我建议调查一下;）

严格：bool

严格匹配；等效于Route.strict。

// this will match both /home and /home/

<Route exact path="/foo" strict={false} component={foo} />

为将来参考，这里是官方文档的link。

Answer 2

您是否考虑过使用：

this.props.match.path

Answer 3

尝试

if (this.props.location.pathname.match(/^\/home\/?$/g))

这将与/home或/home/完全匹配

Answer 4

您可以尝试使用indexOf：

if (this.props.location.indexOf("home") >= 1)

const URL = ["home", "/home", "/home/", "/home/about", "/about", "/logout", "/login/home"];

URL.forEach(url => {
 const isMatch = url.indexOf("home") >= 1 
 console.log(`${url} is a match? ${isMatch}`);
})

警告（或好处）是它可以匹配其中带有/home的任何URL组合（如上所示）。

React-Router-4如何检查手动输入的其他（不必要）斜线“ /”？

4 个答案:

严格：bool