使用React-Router-Dom时路由跳转内容不显示问题求助

问题根源 #

你的路由配置存在路径定义不统一的问题：Password路由用的是相对路径（没有开头斜杠），而Country路由是绝对路径。在Password页面内跳转时，相对路径会自动基于当前页面路径拼接，导致你设置/country时实际路径变成/Password/Country；若把跳转路径设为/Password/Country，又会因为路由里没有对应配置，触发错误重定向逻辑，导致路径重复嵌套成/Password/Password/Country。

解决步骤 #

1. 统一路由为绝对路径
   把所有路由的path都加上开头的斜杠，确保所有路由都挂载在根路径下，避免相对路径的自动拼接问题：

<Routes>
  <Route exact path="/" element={ <Email/> }/>
  <Route exact path="/Password" element={ <Password/>}/>
  <Route exact path="/Type" element={ <Type/> }/>
  <Route exact path="/Country" element={ <Country/> }/>
</Routes>

2. 跳转时使用绝对路径
   在Password组件里跳转到Country页面时，明确使用绝对路径/Country。比如用React Router的useNavigate钩子：

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

function Password() {
  const navigate = useNavigate();

  // 跳转触发逻辑示例
  const goToCountry = () => {
    navigate("/Country");
  };

  return (
    // 组件内容
  );
}

这样修改后，就能确保跳转直接指向根路径下的Country页面，不会出现路径拼接错误或重复嵌套的问题，页面也能正常渲染内容。

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