React Router受保护路由异常及Source Map加载失败问题排查

我正在学习React Router的受保护路由（Protected Route），搭建了一个仅包含登录/登出按钮的页面，用于模拟用户登录状态切换。访问根路径"/"时，本该显示「Sign In」按钮，但仅打印两条控制台日志后出现错误。

错误信息 #

DevTools failed to load source map: Could not load content for webpack://parier/node_modules/react-router/esm/react-router.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

我的代码 #

Root.js #

const [user, setUser] = React.useState(null);

const handleLogin = () => setUser({
  id: '2',
  name: "Temporary Marker",
  isAuthenticated: true
});const handleLogout = () => setUser(null);
console.log("<ROOT>: User before render is: ");
console.log(user);

return(
  <div className="site">

    <Switch>
      <Route exact path="/demo/" component={Demo}/>
      <Route exact path="/home/" component={Home}/>
      <Route element={<ProtectedRoute user={user} />}>
        <Route path="play" element={<Play />} />
      </Route>
      <Route path="/" render={() =>
        <div>
          Default page
          <div>
            {user ? (
            <button onClick={handleLogout}>Sign Out</button>
              ) : (
            <button onClick={handleLogin}>Sign In</button>
            )}
          </div>
        </div>
        }
      />
      <Route path="*" element={<p>There's nothing here: 404!</p>} />
    </Switch>
  </div>
)

}

export default Root;

ProtectedRoute.js #

import react from 'react';
import { Routes, Route, Link} from 'react-router-dom';

const ProtectedRoute = ({ user, redirectPath = '/', children }) => {
  if (!user) {
    console.log("<PROTECTEDROUTE>: User is not defined. Redirecting to / path");
    return <Link to={redirectPath} replace />;
  }

  return children;
};

export default ProtectedRoute;

问题分析与修复 #

核心问题 #

1. React Router版本混用
   代码同时使用了v5的Switch、component/render属性，和v6的element属性，版本语法冲突导致路由逻辑异常。

2. 受保护路由重定向错误
   用Link组件实现重定向是错误的，Link仅用于生成导航链接，无法触发编程式重定向，需要用Navigate组件替代。

3. Source Map提示不影响功能
   控制台的source map错误是webpack加载映射文件的路径问题，不影响路由功能，可以后续通过webpack配置关闭或调整路径解决。

修复后的代码 #

Root.js（适配React Router v6）

import { Routes, Route } from 'react-router-dom';

const Root = () => {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser({
    id: '2',
    name: "Temporary Marker",
    isAuthenticated: true
  });
  const handleLogout = () => setUser(null);
  console.log("<ROOT>: User before render is: ");
  console.log(user);

  return(
    <div className="site">
      <Routes>
        <Route path="/demo/" element={<Demo />}/>
        <Route path="/home/" element={<Home />}/>
        {/* 受保护路由嵌套写法 */}
        <Route element={<ProtectedRoute user={user} />}>
          <Route path="/play" element={<Play />} />
        </Route>
        <Route path="/" element={
          <div>
            Default page
            <div>
              {user ? (
                <button onClick={handleLogout}>Sign Out</button>
              ) : (
                <button onClick={handleLogin}>Sign In</button>
              )}
            </div>
          </div>
        } />
        <Route path="*" element={<p>There's nothing here: 404!</p>} />
      </Routes>
    </div>
  )
}

export default Root;

ProtectedRoute.js（适配React Router v6）

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

const ProtectedRoute = ({ user, redirectPath = '/', children }) => {
  if (!user) {
    console.log("<PROTECTEDROUTE>: User is not defined. Redirecting to / path");
    return <Navigate to={redirectPath} replace />;
  }

  return children;
};

export default ProtectedRoute;

额外说明 #

• 确保项目安装的是React Router v6版本（react-router-dom@^6.x），若使用v5需调整对应API。
• 根路径"/"的路由建议放在最后，避免提前匹配拦截其他路由（v6的Routes会自动匹配最精确路径，但按顺序放置逻辑更清晰）。

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