使用 React Router V6 和 useRoutes 進行模塊化路由？

Question

我來自 angular 世界，我正在嘗試使用 react router v6 new useRoute hook 設置模塊化路由。

應用程序.js

function App() {
const [item, setItem] = useState(null);
    const createUser = async (user) => {
        await axios.post(AUTH_API + '/account', user);
    };
    
    let routes = useRoutes([
        {
            path: '*',
            element: <NotFound404 />,
        },
        {
            path: '/register',
            element: <Registration onCreateUser={createUser} />,
        },
    ]);
    return routes;
}

export default App;

在這些路線中，我想導入我的項目域的路線：

ItemRoutes.js

export const itemRoutes = [
  {
    path: 'edit-item',
    element: <ItemEdit setItem={setItem} item={item} />,
  },
];

如何將 itemRoutes.js 導入 app.js 的路由數組 如您所見，ItemEdit 組件需要 setItem 和 item 掛鈎。 但是這些是在 App.js 中提供的……這可能嗎？

Answer 1

您可以為ItemEdit組件使用的item state 創建 React 上下文。 這避免了傳遞道具的問題。

例子：

import { createContext, useContext, useState } from "react";

const ItemContext = createContext({
  item: null,
  setItem: () => {}
});

const useItemContext = () => useContext(ItemContext);

const ItemContextProvider = ({ children, value }) => (
  <ItemContext.Provider value={value}>{children}</ItemContext.Provider>
);

• 將itemRoutes導入並傳播到App中的路由數組中。
• 使用ItemContextProvider組件包裝App呈現器，並將item和setItem作為上下文值傳遞。

...

const itemRoutes = [
  {
    path: "edit-item",
    element: <ItemEdit />
  }
];

...

import { itemRoutes } from '../path/to/itemRoutes';

function App() {
  const [item, setItem] = useState(null);

  const createUser = async (user) => {
    await axios.post(AUTH_API + '/account', user);
  };

  const routes = useRoutes([
    {
      path: "*",
      element: <NotFound404 />
    },
    {
      path: "/register",
      element: <Registration onCreateUser={createUser} />
    },
    ...itemRoutes
  ]);

  return (
    <ItemContextProvider value={{ item, setItem }}>
      ...
      {routes}
      ...
    </ItemContextProvider>
  );
}

EditItem 應該使用useItemContext掛鈎來解構和訪問item state 和setItem state udpater。

例子：

const ItemEdit = () => {
  const { item, setItem } = useItemContext();

  return (
    <>
      <h1>ItemContext</h1>
      <div>Item: {item}</div>
      <div>
        <label>
          Edit item:{" "}
          <input type="text" onChange={(e) => setItem(e.target.value)} />
        </label>
      </div>
    </>
  );
};