React中AuthContext状态变更后App.js未重渲染，路由不更新问题

我已经将AuthContext单独抽离到AuthContext.js文件中，代码如下：

export const AuthContext = createContext({
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
});
 
const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  const loginHandler = useCallback(() => {
    setIsLoggedIn(true);
  }, []);
 
  const logoutHandler = useCallback(() => {
    setIsLoggedIn(false);
  }, []);
 
  const initialValue = {
    isLoggedIn: isLoggedIn,
    login: loginHandler,
    logout: logoutHandler,
  };
 
  return (
    <AuthContext.Provider value={initialValue}>
      {props.children}
    </AuthContext.Provider>;
  );
};
 
export default AuthContextProvider;

之后在App.js中手动引入了该文件，但发现登录时，即使isLoggedIn的值已经变更，App.js也不会重新渲染，导致routes变量无法获取新值，组件无法切换。App.js代码如下：

const App = () => {
  const authCtx = useContext(AuthContext);
  const { isLoggedIn } = authCtx;
  let routes;
  if (isLoggedIn) {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/places/new" exact>
          <NewPlace />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/places/:placeId">
          <UpdatePlace />
        </Route>
 
        <Redirect to="/" />
      </Switch>
    );
  } 
  else {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/signin" exact>
          <SignIn />
        </Route>
        <Route path="/signup" exact>
          <Signup />
        </Route>
        <Redirect to="/signin" />
      </Switch>
    );
  }

  return (
    <AuthContextProvider>
      <BrowserRouter>
        <MainNavigation />
        <main>{routes}</main>
      </BrowserRouter>
    </AuthContextProvider>
  );
};
 
export default App;

请问这个案例中的错误是什么？

核心错误 #

你把AuthContextProvider放在了App组件的返回值内部，而App组件本身调用useContext(AuthContext)的逻辑，处于Provider的作用范围之外。也就是说，App组件并没有被AuthContext的Provider包裹，自然无法感知到Context内部状态的变化。

修复步骤 #

调整组件嵌套结构，让依赖Context的逻辑处于AuthContextProvider的包裹之下，有两种常见实现方式：

方式一：在App组件外部包裹Provider

修改项目入口文件（如index.js），用AuthContextProvider包裹整个App组件：

// index.js示例代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import AuthContextProvider from './AuthContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>
);

同时修改App.js的返回部分，移除内部的AuthContextProvider：

// App.js修改后的return内容
return (
  <BrowserRouter>
    <MainNavigation />
    <main>{routes}</main>
  </BrowserRouter>
);

方式二：拆分App组件逻辑到子组件

如果不想修改入口文件，可以把依赖Context的路由逻辑抽离成子组件，让子组件被Provider包裹：

// App.js修改后代码
const AppContent = () => {
  const authCtx = useContext(AuthContext);
  const { isLoggedIn } = authCtx;
  let routes;
  
  // 原有路由判断逻辑保持不变...
  
  return (
    <BrowserRouter>
      <MainNavigation />
      <main>{routes}</main>
    </BrowserRouter>
  );
};

const App = () => {
  return (
    <AuthContextProvider>
      <AppContent />
    </AuthContextProvider>
  );
};

export default App;

额外优化建议 #

AuthContext中initialValue是组件每次渲染时重新创建的对象，会导致所有消费Context的组件触发不必要的重渲染。可以用useMemo包裹该对象，仅在依赖项变化时重新生成：

// AuthContext.js中修改initialValue部分
const initialValue = useMemo(() => ({
  isLoggedIn: isLoggedIn,
  login: loginHandler,
  logout: logoutHandler,
}), [isLoggedIn, loginHandler, logoutHandler]);

内容的提问来源于stack exchange，提问作者J.Tran