如何在React Router中正确结合Context使用？

我会使用Routes，也会使用Context，但不知道如何将二者结合使用。

初始的Routes代码如下：

function App() {
    return (
        <Routes>
                <Route path="/" element={<div/>} />
        </Routes>
    )
}

我尝试用Context的Provider包裹Route，写法如下：

export const Context = createContext(7)

function App() {
    return (
        <Routes>
            <Context.Provider value={7}>
                <Route path="/" element={<div/>} />
            </Context.Provider>
        </Routes>
    )
}

此时出现错误：

Error: [undefined] is not a <Route> component. 
All component children of <Routes> must be a <Route> or <React.Fragment>

解决办法 #

方法一：全局包裹（所有路由组件共享Context）

把Context.Provider直接包裹在<Routes>外层，这样所有路由下的组件都能访问到这个Context：

export const Context = createContext(7)

function App() {
    return (
        <Context.Provider value={7}>
            <Routes>
                <Route path="/" element={<div/>} />
            </Routes>
        </Context.Provider>
    )
}

方法二：局部包裹（仅特定路由组件使用Context）

如果只需要给某一个路由对应的组件提供Context，可以把Provider放到该路由的element属性对应的组件内部：

export const Context = createContext(7)

// 封装带Context的页面组件
const HomePage = () => {
    return (
        <Context.Provider value={7}>
            <div>首页内容</div>
        </Context.Provider>
    )
}

function App() {
    return (
        <Routes>
            <Route path="/" element={<HomePage />} />
        </Routes>
    )
}

错误原因说明 #

<Routes>组件要求它的直接子元素只能是<Route>或者<React.Fragment>，你之前把Context.Provider直接作为<Routes>的子元素，违反了这个规则，所以触发了报错。

内容的提问来源于stack exchange，提问作者pinkboid