React Router v5：受保护路由无法渲染组件及修改浏览器URL

你的问题出在直接返回Route组件的逻辑不符合React Router的工作机制：React Router的Route是用来匹配当前浏览器URL的，当用户访问受保护路径时，当前URL是你传入的path值（比如/app/protected），此时你返回的NoAccess对应的Route路径/app/protectedRoute/和当前URL不匹配，自然不会渲染组件，URL也不会发生变化。

针对你的需求（禁止用Redirect、允许用户直接导航到NoAccess页面），这里提供两种可行方案：

方案一：用useNavigate导航到NoAccess路径（推荐） #

这种方式符合路由设计规范，URL会和页面内容对应，用户刷新后也会停留在NoAccess页面，同时满足用户可直接访问该路径的需求。

步骤1：在全局路由配置中添加NoAccess的独立路由 #

在你的Switch（v5）或Routes（v6）中单独声明NoAccess的路由：

// 以v5为例
<Switch>
  {/* 其他路由 */}
  <ProtectedRoute path="/app/protected" exact component={YourProtectedComponent} />
  {/* 允许用户直接访问的NoAccess路由 */}
  <Route path="/app/no-access" component={NoAccess} />
</Switch>

步骤2：修改ProtectedRoute组件逻辑 #

使用useNavigate钩子在权限校验不通过时跳转到NoAccess路径：

/** @jsxImportSource @emotion/react */
import React, { useEffect } from 'react';
import { useUser } from '../../context/userDataContext';
import { Route, useNavigate } from 'react-router-dom';
import NoAccess from './NoAccess';

interface ProtectedRouteProps {
  component: React.FC;
  path: string;
  exact: boolean;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component: Component, path, exact }) => {
  const { user, isReadOnlyUser } = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    // 加载完成后判断权限，跳转至NoAccess页面
    if (!user.loading && isReadOnlyUser) {
      navigate('/app/no-access');
    }
  }, [user.loading, isReadOnlyUser, navigate]);

  if (user.loading) {
    return null; // 加载中可替换为加载动画
  }

  // 权限通过时渲染原受保护路由
  if (!isReadOnlyUser) {
    return <Route component={Component} path={path} exact={exact} />;
  }

  return null; // 跳转过程中无需渲染内容
};

export default ProtectedRoute;

方案二：直接渲染NoAccess组件（不修改URL） #

如果不需要改变URL，也可以直接在ProtectedRoute中渲染NoAccess组件，同时保留全局的NoAccess路由让用户直接访问：

/** @jsxImportSource @emotion/react */
import React from 'react';
import { useUser } from '../../context/userDataContext';
import { Route } from 'react-router-dom';
import NoAccess from './NoAccess';

interface ProtectedRouteProps {
  component: React.FC;
  path: string;
  exact: boolean;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component: Component, path, exact }) => {
  const { user, isReadOnlyUser } = useUser();

  if (user.loading) {
    return null;
  }

  // 只读用户直接显示NoAccess，无需返回Route
  if (isReadOnlyUser) {
    return <NoAccess />;
  }

  return <Route component={Component} path={path} exact={exact} />;
};

export default ProtectedRoute;

这种方式的缺点是：URL仍停留在原受保护路径，用户刷新页面时会重新触发权限校验。

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