如何创建可以从这些页面访问或修改的全局状态？我正在使用 React RouterProvider

Question

如何创建可以从这些页面访问或修改的全局状态？

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'

import Home from './pages/Home.jsx'
import Login from './pages/Login.jsx'
import SignUp from './pages/SignUp.jsx'

const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/login', element: <Login />},
  {path: '/register', element: <SignUp />},
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Answer 1

您可以使用 React Context API 来实现此目的

使用

createContext

中的

react

函数创建上下文，使用

useState

中的

react

钩子创建状态，然后用上下文

RouterProvider

包裹您的

Provider

并将您的状态作为上下文值传递，您可以如果您想传递多个状态，也可以在对象内传递它。

export const MyContext = React.createContext();

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/login", element: <Login /> },
  { path: "/register", element: <Signup /> },
]);

export function App() {
  const myState = useState("Hello from my context.");

  return (
    <MyContext.Provider value={myState}>
      <RouterProvider router={router} />
    </MyContext.Provider>
  );
}

这就是我们在路由器子组件或任何其他嵌套组件中使用提供的

myState

的方式。

import { useContext } from "react";
import { MyContext } from "../app";

function Home() {
  const [state, setState] = useContext(MyContext);

  return <div>Home: {state}</div>;
}

export default Home;