使用react-router进行状态管理

Question

我有一个基本的反应应用程序，例如

App.js - 

const [mode, setMode] = useState("Light");
const setMode = () => {
    /*
        ....
    */
}
const handleFire = () => {
    /*
        ....
    */
}

return(
    <>
        <Navbar mode={mode} handleFire={handleFire}/> //Common element
        <Home mode={mode}/> //For route 1
        <About mode={mode}/> //For route 2
    </>
);

按照react-router网站上的教程，我希望使用以下应用程序架构来实现react-router（当然，这会破坏）：-

App.js -

const router = createBrowserRouter([
    {
      path: "/",
      element: <Root/>,
      children: [
        {
          path: "/home",
          element: <Home mode={mode}/>
        },
        {
          path: "/about",
          element: <About mode={mode}/>
        }
      ]
    }    
]);
return (
    <RouterProvider router={router} />
);

Root.js -

return(
    <>
        <Navbar mode={mode} handleFire={handleFire}/>
        <Outlet>
    </>
);

我面临的主要问题是处理这些文件的状态

mode

。在当前场景中，如果我在

App.js

中声明并设置状态逻辑，那么我将收到错误，指出状态如果未为

Root.js

定义，反之亦然。

也许我需要找到一种更好的方法来设计应用程序并进行状态管理。如何重构我的应用程序以使其不那么复杂并使路由按预期工作？

Answer 1

您可以在

App

中处理模式的状态，并通过上下文将其传递下去。

import { createContext, useState } from 'react';
export const ModeContext = createContext();
function App() {
  const [mode, setMode] = useState('light');
  return (
    <ModeContext.Provider value={{mode, setMode}}>
      <RouterProvider router={router} />
    </ModeContext.Provider>
  );
}

然后，任何组件都可以获取（或设置）该值。

import { ModeContext } from './App';
import { useContext } from 'react';
function Home() {
    const { mode } = useContext(ModeContext);
    return 'Home content...';
}