使用 React Router 6 具有不同路由的多个上下文答案

【问题标题】：More than one context with different Routes with React Router 6使用 React Router 6 具有不同路由的多个上下文
【发布时间】：2022-06-18 02:39:28
【问题描述】：

我正在玩（和学习）Context API 和 React Router (v6)，当我想在一个上下文中包装一些组件时遇到问题，但不是全部。

知道，我的App.js 中有这个结构并且工作正常：

<AuthContextProvider>
        <Nav />
        <CharactersContextProvider>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="characters" element={<Characters />} />
            <Route path="about" element={<About />} />
            <Route path="characters/:name" element={<Details />} />
            <Route path="about/:id" element={<MoreAbout />} />
          </Routes>
        </CharactersContextProvider>
</AuthContextProvider>

我不想将<MoreAbout> 的访问权限授予</CharactersContextProvider>

我只是像这样重组它：

<AuthContextProvider>
        <Nav />
        <CharactersContextProvider>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="characters" element={<Characters />} />
            <Route path="about" element={<About />} />
            <Route path="characters/:name" element={<Details />} />
          </Routes>
        </CharactersContextProvider>
        <Routes>
          <Route path="about/:id" element={<MoreAbout />} />
        </Routes>
</AuthContextProvider>

显然不是这样，因为 React 给了我很多警告说没有路由匹配第一个路由中的 4 条路径：No routes matched Location "/"/"/about"/" /characters" 不仅如此，如果我转到<Characters>，然后转到<MoreAbout>，我仍然可以访问存储在</AuthContextProvider> 中的数据。我不明白为什么。

当有 2 个上下文时，让某些组件可以访问上下文提供程序而其他组件不能访问的正确方法是什么？是否可以将它们全部保存在App.js 中？

提前感谢您的回复。

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

完全相同的问题。似乎没有人能够回答这个问题。我已经在整个互联网上搜索了答案

【讨论】：