React组件内部路由跳转及路径配置异常问题求助

问题根因 #

• 你使用的是React Router v5的exact精确匹配规则，冗余路由配置和跳转路径写法存在冲突：
  1. 相对路径./Signup会基于当前地址栏的路径解析，比如当前在/login页面时，./Signup会被解析为/login/Signup，和你配置的/Signup路径不匹配，因此页面无法加载
  2. 同时配置两条指向Signup组件的精确路由后，跳转目标路径和组件内部路径判断逻辑容易出现不一致，导致跳转失效

修复方案 #

方案1：同组件多路径匹配（保留根路径直接渲染Signup的需求） #

无需重复写两条Route规则，直接用path数组配置多路径匹配即可，避免规则冲突：

<Route exact path={['/', '/Signup']} component={Signup} />
<Route exact path='/login' component={Login} />
{/* dashboard等其余路由正常配置即可 */}

所有跳转统一使用绝对路径，避免相对路径解析歧义：

• 从Login跳转到Signup统一写to="/Signup"或者to="/"，不要使用./Signup写法
• 从Signup跳回Login统一写to="/login"

方案2：重定向统一路径（更推荐，逻辑更清晰） #

如果希望所有Signup的访问路径统一为/Signup，避免同组件对应多路径的混乱问题，可以改成重定向写法：

<Route exact path='/Signup' component={Signup} />
<Route exact path='/' render={() => <Redirect to='/Signup' />} />
<Route exact path='/login' component={Login} />

该方案下用户访问根路径会自动跳转到/Signup，所有跳转逻辑都可以统一基于/Signup路径编写，不会出现跳转失效问题。

内容的提问来源于stack exchange，提问作者tauseef shahid