Question

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

每个路径本质上都是多步形式。

我的想法是创建一个总体信息上下文，并将数据保留在两条路径之间的上下文中。用户在第一条路径中填写数据，然后魔术般地跳到第二条路径，并且上下文应具有他们刚刚使用的所有信息。

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

我不使用链接组件，因为它向页面添加了链接，但我不希望这样做。

那是我的希望。现在，我真的不想使用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;

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

我使用了code sandbox并创建了我要尝试做的示例。在此示例代码中，我使用的是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;

我为示例更改它的原因是，我打算尝试在上下文中传递它作为道具，但是在此过程中我有些失落。这种差异似乎在功能上与使用位置相同。我在想哪种方法都可以为我提供所需的功能。我想。

我确实确实尝试过将上下文作为一种支持，但这对我也不可行。前一条路径中的数据仍然不存在，我设置它的方式引起了其他一些问题。

在这一点上，我认为最好从特定的角度出发，看看什么是最佳的解决方案。

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

将其保留为空白，然后在URL中添加/ section2（URL对我来说https://ye6jl.csb.app/section2就是这样）将显示第2部分第1页，但是上下文为空。

我希望将上下文信息传递到此新页面。

足够有趣的是，如果我添加了Link组件，问题就会消失：

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;

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

如果我需要将上下文作为道具传递，那么做到这一点的最佳方法是什么？似乎我可能需要将prop提取到index.js并将其传递到app.js中，这是我最初尝试的方法，但是它在我的实际应用中导致了其他选择行为的刷新行为，这是非常不希望的以及上下文数据仍然是空白的事实。

路由之间失去反应上下文多步路由上下文

0 个答案: