reactjs - 如何在react router dom (4.xx)中处理空URL参数

Question

我的路线定义如下:

<Route path='/result/:searchTerm' component={Result}/>

效果很好。例如 localhost:3000/result/cat 页面有效。但是，当用户决定从 URL 中删除 :searchTerm 并仅打开 localhost:3000/result/ 时，它会显示空页面。没有错误或任何东西。只是空白页面。它甚至也没有击中我的组件 {Result}。

所以我的疑问是如何处理这种情况。？假设我想将尝试在没有 :searchTerms 的情况下打开 /result/ 的用户重定向到我的索引页。？如何做到这一点？

Answer 1

我相信您只需为可选参数添加问号即可，因此:

<Route path='/result/:searchTerm?' component={Result} />

这是有效的，因为 React Router 4 使用 path-to-regexp解释其路径属性。

要回答问题的最后部分，您可以简单地测试 :searchTerm 的值，如果未定义，则重定向用户。