React Router多路径路由配置与路由参数获取及状态切换问题

1. 修复路由参数获取问题 #

你的路由顺序存在优先级冲突：/:category?作为模糊匹配路由会优先拦截/login和/signup请求，导致动态路由/:type(login|signup)无法被命中。只需调整路由顺序，将精确匹配的路由放在模糊匹配之前：

修改App.js的路由部分：

<Routes>
  {/* 动态认证路由放在最前面，确保优先匹配 */}
  <Route path="/:type(login|signup)" element={<AuthIndex />} />
  <Route path="/404" element={<h1>Not Found..!!</h1>} />
  {/* 商品分类路由延后，避免拦截认证路径 */}
  <Route path="/:category?" element={<Products />} />
  {/* 根路径导航（可根据需求修改目标路径） */}
  <Route path="/" element={<Navigate to="/" replace />} />
  {/* 捕获所有未匹配路由，导航到404 */}
  <Route path="*" element={<Navigate to="/404" replace />} />
</Routes>

调整后，useParams()就能正确获取type参数，按钮文字切换逻辑也会正常工作。

2. 完善Firebase API调用逻辑 #

目前仅实现了注册功能，需补充登录API调用，并确保表单提交时根据路由参数执行对应操作：

修改AuthIndex.js的提交逻辑并添加登录方法：

const handleSubmission = e => {
  e.preventDefault();
  if (params.type === "signup") {
    signupWithEmailAndPassword();
  } else if (params.type === "login") {
    loginWithEmailAndPassword();
  }
};

// 新增登录API调用方法
const loginWithEmailAndPassword = async () => {
  try {
    const response = await axios.post(`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyAJNV9-dm4p8t2gYRohFj6jqzPVBgish_A`, {
      email: details.email,
      password: details.password,
      returnSecureToken: true
    });
    console.log("登录成功", response);
  } catch (error) {
    console.error("登录失败", error.response);
  }
};

还可以给NavLink添加激活状态样式，提升用户体验：

<NavLink 
  to="/login" 
  className={({ isActive }) => isActive ? "active-tab" : ""}
>
  <h3>Login</h3>
</NavLink>
<NavLink 
  to="/signup" 
  className={({ isActive }) => isActive ? "active-tab" : ""}
>
  <h3>Signup</h3>
</NavLink>

在CSS中定义.active-tab样式即可（例如改变文字颜色或添加下划线）。

3. 添加导航路由替代重定向 #

在App.js的路由配置中，我们已经添加了两个核心导航路由：

• 根路径/导航到首页（可根据业务需求修改为具体路径，比如/products）
• 通配符路由*捕获所有未匹配的路径，自动导航到/404页面
  这完全符合React Router v6的用法，替代了旧版的重定向逻辑。

验证要点 #

• 访问/login和/signup，查看控制台输出的params是否正确显示type值
• 测试注册、登录功能，确认API响应正常
• 输入不存在的路径，检查是否自动跳转到/404

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