React路由场景下，如何在组件外部使用useState状态变量？

你的核心问题是**api状态变量的作用域仅限于App组件内部**，而路由配置appRoute定义在组件外部，根本无法直接访问这个组件内的状态。下面提供几种可行的解决方案：

方案1：通过Outlet的Context传递状态（推荐） #

利用React Router的Outlet组件可以传递context的特性，将api状态传递给子路由组件：

1. 修改App组件，在Outlet中传入context：

const App = () => {
  const [api, setAPI_KEY] = useState(PUNE_API);

  const handleAPIKeyChange = (newAPIKey) => {
    console.log("API Key changed to:", newAPIKey);
    setAPI_KEY(newAPIKey);
  };

  return (
    <div className="app">
      <Header onAPIKeyChange={handleAPIKeyChange} />
      {/* 将api通过context传递给子路由 */}
      <Outlet context={{ api }} />
      <Footer />
    </div>
  ); 
};

2. 在BodyLayout组件中，使用useOutletContext获取传递的状态：

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

const BodyLayout = () => {
  // 从Outlet的context中取出api
  const { api } = useOutletContext();
  
  // 后续就可以正常使用api变量了
  return <div>{/* 组件内容 */}</div>;
};

3. 路由配置中无需再传递api props：

const appRoute = createBrowserRouter([
  {
    path : "/",
    element : <App/>,
    errorElement : <RouterError/>,
    children:[
      { path : "/home", element : <BodyLayout /> },
      { path : "/", element : <BodyLayout /> },
      // 其他路由保持不变
    ],
  },
]);

方案2：将路由配置移到组件内部（使用useRoutes） #

把路由逻辑放到App组件内部，这样就能直接访问组件内的api状态：

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

const App = () => {
  const [api, setAPI_KEY] = useState(PUNE_API);

  const handleAPIKeyChange = (newAPIKey) => {
    console.log("API Key changed to:", newAPIKey);
    setAPI_KEY(newAPIKey);
  };

  // 在组件内部定义路由配置，直接访问api
  const routes = useRoutes([
    { path: "/home", element: <BodyLayout api={api} /> },
    { path: "/", element: <BodyLayout api={api} /> },
    { path: "/about", element: <About /> },
    { path: "/contact", element: <Contact /> },
    { path: "/cart", element: <Cart /> },
    { path: "/offers", element: <Offers /> },
  ]);

  return (
    <div className="app">
      <Header onAPIKeyChange={handleAPIKeyChange} />
      {routes}
      <Footer />
    </div>
  ); 
};

// 根渲染部分简化
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={createBrowserRouter([{ path: "/", element: <App /> }])} />
);

方案3：使用React Context全局管理状态 #

如果后续多个组件都需要访问api状态，可以用Context做全局管理：

1. 创建Context：

import { createContext, useContext } from 'react';

const APIContext = createContext();

// 自定义钩子方便使用
export const useAPI = () => useContext(APIContext);

2. 在App组件中提供Context：

const App = () => {
  const [api, setAPI_KEY] = useState(PUNE_API);

  const handleAPIKeyChange = (newAPIKey) => {
    console.log("API Key changed to:", newAPIKey);
    setAPI_KEY(newAPIKey);
  };

  return (
    <APIContext.Provider value={{ api }}>
      <div className="app">
        <Header onAPIKeyChange={handleAPIKeyChange} />
        <Outlet />
        <Footer />
      </div>
    </APIContext.Provider>
  ); 
};

3. 在BodyLayout中获取状态：

import { useAPI } from './path-to-context';

const BodyLayout = () => {
  const { api } = useAPI();
  return <div>{/* 组件内容 */}</div>;
};

路由配置中同样无需传递api props，直接使用<BodyLayout />即可。

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