嵌套路由下从Login组件跳转至Signup路由的路径问题求助

你的问题出在Login组件的match.path上——因为Login是${match.path}/login路由对应的组件，它自身的match.path已经包含了/login后缀，所以拼接/signup后会生成父路径/login/signup，这显然不是你要的有效路径。

给你几个简单的解决办法：

1. 使用相对路径（最简便） #

直接把Link的to属性改成相对路径../signup，相对当前路由向上跳转一级，就能正确指向父路径下的signup路由：

<div>
  Need an account? <Link to="../signup">Sign Up</Link>
</div>

2. 传递父组件的匹配路径 #

如果父路由的路径是动态的（比如不确定父路径是什么），可以在父组件渲染Login时，把父级的match.path通过props传递进去：

parent.js 修改路由： #

<Route 
  path={`${match.path}/login`} 
  render={(props) => <Login parentPath={match.path} {...props} />} 
/>

Login.js 中使用传递的路径： #

<div>
  Need an account? <Link to={`${parentPath}/signup`}>Sign Up</Link>
</div>

3. 使用useRouteMatch获取父级路径（React Router v5+） #

在Login组件中通过useRouteMatch钩子获取上一级路由的匹配信息，再拼接signup路径：

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

// 组件内部
const parentMatch = useRouteMatch('../');

<div>
  Need an account? <Link to={`${parentMatch.path}/signup`}>Sign Up</Link>
</div>

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