設定react專案會話變數，在路由組件之間共享資料

我目前正在做一個反應專案，我在路由之間發送資料。我研究過 React 中的背景關系管理器，但據我所知，它們主要用于包裝組件，而不是獲取和設定資料。

是否有任何簡單的方法來初始化專案全域狀態 Object ={}可以在整個專案路線中輕松寫入和讀取？

這是一個小示例結構，它模擬了我希望它看起來像什么：

index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import App1 from "./App1";
import App2 from "./App2";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const [globalNumber, setGlobalNumber] = // initialize some global counter at zero.

root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/app1" element={<App1 />} />
        <Route path="/app2" element={<App2 />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

App1.tsx：

const App1 = () => {
  const [globalNumber, setGlobalNumber] = // get state-setter and current value from global state
  return (
    <button
      onClick={() => {
        setGlobalNumber(globalNumber   1);
      }}
    >
      Click me to increment global number!
    </button>
  );
};
export default App1;

App2.tsx：

const App2 = () => {
  const [globalNumber, setGlobalNumber] = // get current global number
  return <h1>Global number is currently: {globalNumber}</h1>;
};
export default App2;

在這里，我使用了一些虛構[globalNumber, setGlobalNumber]的狀態，并評論了缺少代碼的地方。然后希望能夠導航到路線/app1，單擊幾次按鈕，并在導航到路線時在螢屏上顯示數字/app2。謝謝！

uj5u.com熱心網友回復：

使用 React 背景關系，你走在了正確的軌道上。React Context 提供者是一種將“props”向下傳遞給遠方后代組件的方法，而無需將它們作為 props 顯式向下鉆取。這些可以是任何值。通過背景關系提供者提供一些狀態和更新函式是很常見的。

react-router的Outlet組件實際上為這種將資料傳遞給嵌套路由組件的用例提供了一個背景關系。

例子：

import React from "react";
import ReactDOM from "react-dom/client";

import {
  BrowserRouter as Router,
  Route,
  Routes,
  Outlet // <-- import Outlet
} from "react-router-dom";
import App1 from "./App1";
import App2 from "./App2";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const App = () => {
  const [globalNumber, setGlobalNumber] = React.useState(0);

  return (
    <Router>
      <Routes>
        <Route // <-- layout route
          element={(
            <Outlet
              context={{ // <-- pass context value
                globalNumber,
                setGlobalNumber
              }}
            />
          )}
        >
          <Route path="/app1" element={<App1 />} />
          <Route path="/app2" element={<App2 />} />
        </Route>
      </Routes>
    </Router>
  );
};

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

然后在嵌套路由組件中使用useOutletContext鉤子訪問背景關系值。

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

const App1 = () => {
  const { setGlobalNumber } = useOutletContext();

  return (
    <button
      onClick={() => {
        setGlobalNumber(globalNumber => globalNumber   1);
      }}
    >
      Click me to increment global number!
    </button>
  );
};

...

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

const App2 = () => {
  const { globalNumber } = useOutletContext();

  return <h1>Global number is currently: {globalNumber}</h1>;
};

標籤：反应打字稿反应钩子反应路由器反应打字稿

上一篇：基于鍵名的物件屬性的窄型別

下一篇：是否可以使用方法設定TypeScript介面鍵