Reactjs 反应上下文多步骤路由上下文在路由之间丢失

我正在创建一个React应用程序，它基本上由两部分组成。第一部分是用户输入一些基本信息的地方。第二部分继续介绍已经输入的信息，但是用户将通过URL重定向到此位置

每个路径本质上是一个多步骤形式

我的想法是创建一个总体信息上下文，并将数据保存在两条路径之间的上下文中。用户在第一条路径中填充数据，然后神奇地快速移动到第二条路径，上下文应该包含他们刚才使用的所有信息

我的要求之一是没有任何查询参数，并尽量减少URL信息。因此，我有路径1（第1节）的站点/分区和路径2的站点/分区

我没有使用链接组件，因为它会向页面添加链接，我不希望这样

这是我的希望。现在，我真的不想使用BrowserRouter，但我最终使用它来获取位置，以便显示正确的路径

下面是我实际的app.js的基本情况：

import React from "react";
import { useLocation } from "react-router-dom";
import { InfoContextProvider } from "InfoContextProvider";
import Section1 from "./Section1";
import Section2 from "./Section2";

const AppLoc = () => {
  const location = useLocation();

  return (
    <InfoContextProvider>
      {location.pathname === "/" && <Section1 />}
      {location.pathname.includes("enroll") && <Section2 />}
    </InfoContextProvider>
  );
};

export default AppLoc;

从“React”导入React；
从“react router dom”导入{useLocation}；
从“InfoContextProvider”导入{InfoContextProvider}；
从“/Section1”导入Section1；
从“/Section2”导入Section2；
常量AppLoc=（）=>{
const location=useLocation（）；
返回(
{location.pathname===“/”&&&}
{location.pathname.includes（“注册”）&&}
);
};
导出默认的AppLoc；

我不想真正实现路由的所有细节，但我需要一种方法来确定用户将要走哪条路径

我使用并创建了一个我正在尝试做的示例。在这个示例代码中，我使用了Route组件，因此代码实际上如下所示：

import React from "react";
import { Route } from "react-router-dom";
import { InfoContextProvider } from "./InfoContextProvider";
import Section2 from "./Section2";
import Section1 from "./Section1";

function App() {
  return (
    <>
      <InfoContextProvider>
        <Route exact path="/" component={Section1} />
        <Route exact path="/section2" component={Section2} />
      </InfoContextProvider>
    </>
  );
}

export default App;

从“React”导入React；
从“react router dom”导入{Route}；
从“/InfoContextProvider”导入{InfoContextProvider}”；
从“/Section2”导入Section2；
从“/Section1”导入Section1；
函数App（）{
返回(
);
}
导出默认应用程序；

我之所以在这个例子中更改它，是因为我想尝试在上下文中作为道具传递，但在这一过程中我有点迷路了。这种差异在功能上似乎与使用位置相同。我认为这两种方法都能为我提供所需的功能。我想

我确实试图将上下文作为道具传递，但这对我来说也不起作用。来自上一条路径的数据仍然不存在，我设置它的方式导致了一些其他问题

在这一点上，我觉得最好从一个特定的点开始，看看最好的解决方案是什么

话虽如此，如果您转到第1页第1节的“我的代码沙箱”，并单击“更新信息”，您将看到一个对象被添加到上下文中。单击下一页，将显示上下文

保持这样，并将/section2添加到URL（URL在我看来是这样的）将显示第1页的第2节，但上下文为空

我的愿望是将上下文信息传递到这个新页面

有趣的是，如果我添加链接组件，问题就会消失：

import React, { useContext } from "react";
import { Route, Link } from "react-router-dom";
import { InfoContextProvider } from "./InfoContextProvider";
import Section1 from "./Section1";
import Section2 from "./Section2";

function AppWithProps() {
  return (
    <>
      <InfoContextProvider>
        <div>
          <Link to="/">Section 1</Link>
        </div>
        <div>
          <Link to="/section2">Section 2</Link>
        </div>
        <Route exact path="/" component={Section1} />
        <Route exact path="/section2" component={Section2} />
      </InfoContextProvider>
    </>
  );
}

export default AppWithProps;

import React，{useContext}来自“React”；
从“react router dom”导入{Route，Link}；
从“/InfoContextProvider”导入{InfoContextProvider}”；
从“/Section1”导入Section1；
从“/Section2”导入Section2；
函数AppWithProps（）{
返回(
第一节
第二节
);
}
导出默认AppWithProps；

在不使用链接组件的情况下，是否可以使用Route组件或location方法在两条路径之间保持上下文

如果我需要将上下文作为道具传递，那么最好的方法是什么？看起来我可能需要将道具提取到index.js并将其传递到app.js，这是我最初尝试的，但它在我的实际应用程序中导致了一些其他刷新行为，用于选择下拉列表，这是非常不希望的，同时上下文数据仍然为空