Context Provider is not a Route 组件错误答案

【问题标题】：Context Provider is not a Route component errorContext Provider is not a Route 组件错误
【发布时间】：2022-11-22 17:31:36
【问题描述】：

当我将一些路由包装在 Context Provider 标记中时，出现此错误。我基本上需要将记录的用户上下文发送到这些路由中的每一个，以供他们使用或修改。提供者中发送的值是这样的：

const [loggedUser, setLoggedUser] = useState(null)
const value = useMemo(() => {{ loggedUser, setLoggedUser }}, [loggedUser, setLoggedUser])

这是代码：

return (
  <>
    <Routes>
      <Route path="/" element={ <MainPage /> } />
      <UserContext.Provider value={value}>
        <Route path="/login" element={<LoginMenu/>} />
        <Route path="/register" element={<RegisterMenu/>} />
        <Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
      </UserContext.Provider>
    </Routes>
  </>
)

【问题讨论】：

只有<Route>可以是<Route>的孩子

标签： javascript reactjs react-router

【解决方案1】：

只有 Route 组件可以是 Route 组件的子组件。将 UserContext.Provider 组件抽象成布局路由。

例子：

import { Routes, Route, Outlet } from 'react-router-dom';

const UserContextProvider = () => (
  <UserContext.Provider value={value}>
    <Outlet />
  </UserContext.Provider>
);

...

<Routes>
  <Route path="/" element={<MainPage />} />
  <Route element={<UserContextProvider />}>
    <Route path="/login" element={<LoginMenu />} />
    <Route path="/register" element={<RegisterMenu />} />
    <Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
  </Route>
</Routes>

或者将整个Routes 包裹在UserContext.Provider 组件中。

例子：

return (
  <UserContext.Provider value={value}>
    <Routes>
      <Route path="/" element={ <MainPage /> } />
      <Route path="/login" element={<LoginMenu />} />
      <Route path="/register" element={<RegisterMenu />} />
      <Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
    </Routes>
  </UserContext.Provider>
);

【讨论】：