React Router跳转报错：No routes matched location "/home/" 修复咨询

错误根源 #

出现No routes matched location "/home/"的核心原因：

• 路由规则定义的是/home/:email，必须携带有效的email参数才能匹配
• 登录成功时，你先执行了navigate(/home/${loginStatus})，此时loginStatus还是初始空值，导致跳转路径变成/home/，无有效参数
• toHome函数直接跳转到/home，同样不符合路由规则

具体修复步骤 #

1. 修正登录成功后的跳转逻辑 #

在login.js的login函数中，直接使用接口返回的email拼接跳转路径，无需依赖异步更新的loginStatus：

const login = (e) => {
  e.preventDefault()
  Axios.post("http://localhost:3001/login" , {
    email: emailLog, 
    password: passwordLog
  }).then((response)=> {
    console.log(response)

    if(response.data.message) {
      alert((response.data.message))
    } else {
      const userEmail = response.data[0].email;
      setLoginStatus(userEmail);
      navigate(`/home/${userEmail}`); // 直接用接口返回的email拼接路径
    }
  })
}

2. 修复toHome函数的跳转逻辑 #

确保跳转时携带有效参数，未登录时引导回登录页：

const toHome = () => {
  if(loginStatus) {
    navigate(`/home/${loginStatus}`);
  } else {
    navigate("/login");
  }
}

3. （可选）添加兜底路由避免白屏 #

在index.js的路由配置中添加兜底规则，处理所有未定义的路径：

<Routes>
  <Route path="/" element={<Register />} />
  <Route path="/home/:email" element={<App />} />
  <Route path="/login" element={<Login />} />
  <Route path="*" element={<div>页面不存在，请检查路径</div>} />
</Routes>

验证 #

修改完成后，登录成功会自动跳转到/home/xxx@example.com格式的有效路径，和手动输入的路径规则一致，即可正常匹配路由并展示邮箱信息。

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