本地环境React Router Match Path错误及路由组件问题求助

核心错误原因 #

• 你把React组件（如<Browse />、<Signin />）当作路径传给loggedInPath和path属性，但Navigate组件的pathname需要字符串格式的路由路径（比如"/browse"），而非组件实例，这导致includes方法无法在非字符串类型上调用，触发TypeError。
• React Router v6已废弃Route的render属性，改用element；同时受保护路由组件内部无需嵌套Routes，否则会造成路由层级混乱。

第一步：修正App.js中的属性传递 #

把所有传递给IsUserRedirect和ProtectedRoute的组件类型路径替换为字符串路径：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';
import Home from './pages/home'
import Signin from './pages/signin'
import Browse from './pages/browse';
import Signup from './pages/signup'

function App() {
  const { user } = useAuthListener();

  return (
    <>
      <Router>
        <Routes>
          <Route
            path="/signin"
            element={
              <IsUserRedirect user={user} loggedInPath="/browse">
                <Signin />
              </IsUserRedirect>
            }
          />
          <Route
            path="/signup"
            element={
              <IsUserRedirect user={user} loggedInPath="/browse">
                <Signup />
              </IsUserRedirect>
            }
          />
          <Route
            path="/browse"
            element={
              <ProtectedRoute user={user}>
                <Browse />
              </ProtectedRoute>
            }
          />
          <Route
            path="*"
            element={
              <IsUserRedirect user={user} loggedInPath="/browse">
                <Home />
              </IsUserRedirect>
            }
          />
        </Routes>
      </Router>   
    </>
  );
}

export default App;

第二步：重构helpers/routes中的路由组件 #

适配React Router v6的API，移除嵌套Routes，改用条件渲染返回Navigate或子组件：

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';

export function IsUserRedirect({ user, loggedInPath, children }) {
  const location = useLocation();

  if (!user) {
    return children;
  }

  return <Navigate to={loggedInPath} state={{ from: location }} replace />;
}

export function ProtectedRoute({ user, children }) {
  const location = useLocation();

  if (user) {
    return children;
  }

  return <Navigate to="/signin" state={{ from: location }} replace />;
}

关键修改说明 #

1. 路径传递规范：所有路由路径均使用字符串（如"/browse"），确保Navigate能正确识别目标路径。
2. 移除冗余嵌套：受保护路由组件不再嵌套Routes和Route，直接通过条件渲染返回内容或重定向，符合v6的路由设计逻辑。
3. 携带原路径信息：用useLocation获取当前路由位置，重定向时携带state参数，方便登录后跳转回用户原本访问的页面。
4. 优化历史栈：给Navigate添加replace属性，避免浏览器历史栈中留下重定向记录，提升用户体验。

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