React路由警告：渲染时更新组件问题及PrivateRoute修正求助

Let's break down what's causing this warning and how to fix it properly.

Why You're Seeing This Warning #

The issue comes from your current code executing setLoginModalShow(true) directly inside the Route's render callback. React strictly prohibits updating state (especially state belonging to a parent component like App) during the rendering phase of another component. When you run setLoginModalShow while rendering the Redirect/Route component, React detects that you're modifying App's state mid-render of Context.Consumer (where your user value comes from), hence the warning in dev mode (prod mode suppresses this but the underlying issue remains).

Correct Implementation #

We need to move the state update and redirect logic to a side effect (after the component has finished rendering) using useEffect. Here's how to adjust your PrivateRoute component:

For React Router v5

import React, { useEffect } from 'react';
import { Route, useHistory } from 'react-router-dom';

const PrivateRoute = ({ component: Component, user, setLoginModalShow, ...rest }) => {
  const history = useHistory();

  // Check authorization and handle redirect/modal in a side effect
  useEffect(() => {
    const isAuthorized = 
      (user?.providerId && user.providerId !== 'password') ||
      (user?.providerId === 'password' && user.emailVerified);

    if (!isAuthorized) {
      // Show login modal first
      setLoginModalShow(true);
      // Redirect to homepage
      history.push('/');
    }
  }, [user, setLoginModalShow, history]);

  const isAuthorized = 
    (user?.providerId && user.providerId !== 'password') ||
    (user?.providerId === 'password' && user.emailVerified);

  return (
    <Route
      {...rest}
      render={(props) => isAuthorized ? <Component {...props} /> : null}
    />
  );
};

export default PrivateRoute;

For React Router v6

If you're using the newer v6 API, adjust the component to use Navigate and element prop instead:

import React, { useEffect } from 'react';
import { Route, useNavigate } from 'react-router-dom';

const PrivateRoute = ({ element: Element, user, setLoginModalShow, ...rest }) => {
  const navigate = useNavigate();

  useEffect(() => {
    const isAuthorized = 
      (user?.providerId && user.providerId !== 'password') ||
      (user?.providerId === 'password' && user.emailVerified);

    if (!isAuthorized) {
      setLoginModalShow(true);
      navigate('/');
    }
  }, [user, setLoginModalShow, navigate]);

  const isAuthorized = 
    (user?.providerId && user.providerId !== 'password') ||
    (user?.providerId === 'password' && user.emailVerified);

  return (
    <Route
      {...rest}
      element={isAuthorized ? <Element /> : null}
    />
  );
};

export default PrivateRoute;

Key Changes Explained #

1. Move Logic to useEffect: This ensures we only update the modal state and trigger redirect after the component has finished rendering, avoiding the cross-component state update during render.
2. Simplify Render Callback: The render callback now only decides whether to render the protected component or null (since redirect is handled in the side effect).
3. Optional Chaining: Added ?. to safely access user properties in case user is null/undefined.

Usage in App.js #

Make sure you're passing user, setLoginModalShow, and the protected component correctly when using PrivateRoute:

<PrivateRoute
  path="/your-protected-route"
  component={YourProtectedComponent}
  user={user} // From your auth context
  setLoginModalShow={setLoginModalShow} // From App's state
/>

This approach eliminates the dev mode warning while keeping your desired functionality intact: showing the login modal and redirecting when the user is unauthorized or unverified.

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