react-router-dom嵌套组件路由跳转路径追加异常求助

嘿，我一眼就看出问题出在哪了——你在跳转的时候用了match.url来拼接路径，这就导致了相对路径跳转，所以路径才会被追加到当前路由后面。

咱们拆解下场景：当你处于/quiz/draft路由时，match.url的值就是/quiz/draft，所以${match.url}/${uuid}最终会变成/quiz/draft/142a99fc-beb8-4de5-96c5-311cae372287，这显然不是你想要的结果。

给你几个简单直接的解决方案：

方案1：直接使用绝对路径跳转 #

最简单的方式就是写绝对路径，因为你的详情页路由是/quiz/:uuid，直接用/quiz/${uuid}就能精准跳转到目标页面。修改按钮的点击事件：

<button className="quiz-button edit" onClick={() => history.push(`/quiz/${uuid}`)}>EDIT</button>

方案2：基于父路由的match.path拼接（更灵活） #

如果你担心以后父路由路径变化（比如把/quiz改成/quizzes），可以从QuizPage组件把父级的match.path传递给子组件，这样跳转逻辑更通用。

首先在QuizPage里传递父路径：

<Route exact path={`${match.path}/draft`} render={props => <QuizDraftCenter {...props} parentMatchPath={match.path} /> } />

然后在QuizDraftCenter里用这个父路径拼接：

<button className="quiz-button edit" onClick={() => history.push(`${parentMatchPath}/${uuid}`)}>EDIT</button>

这样就算父路由的路径调整了，子组件的跳转逻辑也不用跟着改，维护起来更省心。

方案3：用Link组件替代按钮跳转 #

如果业务允许，用React Router的Link组件会更符合路由的最佳实践，同样注意用绝对路径：

import { Link } from 'react-router-dom';

// 把按钮替换为Link组件
<Link to={`/quiz/${uuid}`} className="quiz-button edit">EDIT</Link>

这样修改后，点击按钮就能正确跳转到/quiz/142a99fc-beb8-4de5-96c5-311cae372287，不会再出现路径追加的问题啦。

内容的提问来源于stack exchange，提问作者solitude.loner7