使用 React Router V6 和 useRoutes 进行模块化路由？

Question

I come from the angular world and I'm trying to setup a modular routes using react router v6 new useRoute hook.

App.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;

In these routes I want to import the routes of my item domain:

ItemRoutes.js

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

How can I import itemRoutes.js into the routes array of app.js As you can see the ItemEdit components expects the setItem and item hook. But those are provided in App.js... Is this even possible?

Answer 1

You could create a React context for the item state, that the ItemEdit component consumes. This avoids the issue of passing props.

Example:

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>
);

• Import and spread the itemRoutes into the routes array in App .
• Wrap the App render with the ItemContextProvider component and pass item and setItem as the context value.

...

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 should use the useItemContext hook to destructure and access the item state and the setItem state udpater.

Example:

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>
    </>
  );
};