React Router路由跳转异常：如何避免/about/about这类重复路径？

问题原因 #

你遇到的是相对路径与绝对路径的区别问题：当Link的to属性使用不带斜杠的相对路径（如"about"）时，React Router会基于当前页面的URL进行路径拼接。比如当前在/about页面，点击to="about"就会生成/about/about，导致路径重复。

解决方案 #

将Link的to属性改为绝对路径（以/开头），这样无论当前处于哪个页面，都会跳转到根路径下的目标路由：

修改后的Footer代码：

const Footer = () => {
  return (
    <footer className={classes.footer}>
        <div className={classes.footerLinks}>
          <h2>Company</h2>
          <Link to="/about">
            About
          </Link>
          <Link to="/privacy">
            Privacy
          </Link>
          <Link to="/">Expectations</Link>
        </div>
    </footer>
  );
};

补充说明：React Router v6中已经移除了exact属性，因为<Routes>组件默认会精确匹配路由规则，所以无需再添加该属性。

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