场景是通过一条数据的id查看当前数据对应的某些数据, 拿到数据id后进行页面跳转, 在跳转时候发生了一些问题

这个数据查看场景分为三层

规则库列表 ->点击某个规则库进行查看规则库下的规则详情列表 -> 点击规则详情列表中的当前项拿到规则数据的id, 通过id跳转到规则对应的规则数据展示页面

对应的路由因该是

localhost:8080/rulesList/ -> localhost:8080/rulesList/ruleDetailList ->localhost:8080/rulesList/ruledataview/01

在使用react的props中的history对象进行路由跳转的时候是这么跳转的

this.props.history.push(`ruledataview/${id}`)
// 结果跳转失败路由变成了
localhost:8080/rulesList/ruleDetailList/ruledataview/01
// 上一个页面的路由地址没有被替换掉直接push了路由地址

看了官方文档和查找了一些资料后, 发现

如果一个路由使用了相对路径，那么完整的路径将由它的所有祖先节点的路径和自身指定的相对路径拼接而成，使用绝对路径可以使路由匹配行为忽略嵌套关系 不以/开头的则为相对路径，即相对于父组件的路径进行跳转, 所以讲跳转地址前面加一个/变为绝对路径即可正常跳转了