React未授权用户跳转登录页，访问/user路径报404错误如何修复？

问题原因 #

• 首要原因是/user对应的Route的render回调没有返回值：你使用了包裹花括号的箭头函数语法，但没有显式写return，导致该路由匹配后返回undefined，没有渲染任何有效内容，最终匹配到后续的404路由。
• 其次存在异步校验的体验问题：权限接口是异步请求，初始渲染时auth默认值为false，会出现接口还没返回结果就直接跳转登录页的闪烁问题，建议补充加载状态处理。

修复方案 #

调整render回调的返回写法，同时补充加载态避免跳转闪烁，修复后的代码如下：

const App = () => {
  const [auth, setAuth] = useState(false);
  // 新增加载态，避免接口未返回时误跳转
  const [loading, setLoading] = useState(true);
  const authControl = async () => {
    try {
      const res = await axios({
        url: "https://localhost:44357/api/Auth/user",
        withCredentials: true,
      });
      if (res.data.success) setAuth(true);
    } catch (err) {
      console.log(err);
    } finally {
      // 接口请求完成后关闭加载态
      setLoading(false);
    }
  };
  useEffect(() => {
    authControl();
  }, []);

  // 加载中时展示加载提示，避免路由误匹配
  if(loading) return <div>权限校验中...</div>

  return (
    <div>
      <BrowserRouter>
        <Route path="/" exact component={Login} />
        <Route
          path="/user"
          // 写法1：去掉花括号，用箭头函数隐式返回
          render={() => auth ? <AdminPanel /> : <Redirect to="/" />}
          // 写法2：保留花括号，显式写return
          // render={() => {
          //   return auth ? <AdminPanel /> : <Redirect to="/" />;
          // }}
        />
        <Route render={() => <h1>404 Not Found</h1>} />
      </BrowserRouter>
    </div>
  );
};

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