React Router v5匹配URL后对应List组件未渲染问题求助

问题原因 #

• 核心错误是你的路由path属性缺少前缀/：React Router v5 中没有以/开头的path会被判定为相对路径，会基于父级路由的路径拼接后再做匹配，你直接访问根路径下的/comments/1无法匹配到comments/:curPage这个相对路径规则，所以不会触发组件渲染。
• 次要优化点：你另一个test路由的path也没有加前缀/，同样会出现匹配失败的问题。

解决方案 #

把所有路由的path开头都加上/，修正后的路由代码如下：

import { Route, Switch } from "react-router-dom";

<Switch>
        <Route
          path="/comments/:curPage"
          render={(props) => <List {...props} comments={comments} />}
        />
        <Route path="/test" exact component={Test} />
</Switch>

修改后重新访问/comments/1即可正常渲染List组件。如果修改后还是无法渲染，可以检查App组件是否存在条件渲染逻辑隐藏了路由出口，或者是否有其他冲突的上层路由规则。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung