使用 history.push() 传递状态切换页面 - React Router 5答案

【问题标题】：Switching pages with history.push() passing state - React Router 5使用 history.push() 传递状态切换页面 - React Router 5
【发布时间】：2021-10-30 05:20:01
【问题描述】：

我想在页面之间切换。
我正在推动路径和 {state} 对象。
问题是当按下浏览器后退按钮时，即使我只切换两次或更多，它也会在注册和登录之间来回无休止。

或者当按下浏览器后退按钮时，URL 会更改为登录或注册，但该页面将是我的 404 组件，或者是 Main 页面（在沙箱中），无论之前的页面是什么。

codesandbox

两个组件在一个条件渲染中

 {auth ? (
          <Switch>
            <Route path="/signup" auth={auth}>
              <SignUp setAuth={setAuth} />
            </Route>
            <Route path="/signin" auth={auth}>
              <SignIn setAuth={setAuth} />
            </Route>
          </Switch>
        ) :

在按钮中从注册切换到登录时 -

history.push({
          pathname: "/signin",
          state: { from: "fromSignUp" }
        });

按下每个组件上的浏览器后退按钮将检查历史记录是否来自注册或登录 -

useEffect(() => {
    window.onpopstate = () => {
      console.log("useEffect SignUp", location.state?.from === "fromSignIn"); // sometimes true/sometimes false, even when came from 'signin'
      if (location.state?.from === "fromSignIn") {
        history.push({
          pathname: "/signin",
          state: { from: "fromSignUp" }
        });
      } else {
        setAuth(false);
        history.goBack();
      }
    };
  }, [location.state, history]);

在我的 VS Code 中，它的表现更糟。

我可以提供 GitHub 存储库的链接。

谢谢

【问题讨论】：

标签： reactjs routes react-router react-router-dom history.js

【解决方案1】：

找到解决方案。
感谢我的一个朋友，我发现不需要任何这些条件、函数和 push() -

已移除 -

const [auth setAuth] = useState(false)  // no need

 window.onpopstate = () => {   // no need
 history.push({    // no need
          pathname: "/signin",
          state: { from: "fromSignUp" }
        });

解决方案是两个<Switch>。 Route 的结束标签（导航栏） - <Route> <Header/> - </Route> 低于内部 Switch 内的所有其他组件

我没有在这里展示道具。
App.js

  return (
    <div>
      <Switch>
        <Route path="/signup">
          <SignUp />
        </Route>
        <Route path="/signin">
          <SignIn />
        </Route>
        <Route >
          <Header />
          <div>
            <Switch>
              <Route exact path="/"  >
                <Main />
              </Route>
              <Route path="/pageone" >
                <PageOne />
              </Route>
              <Route path="/pagetwo"  >
                <PageTwo />
              </Route>
              <Route component={PageNotFound} path="*" />
            </Switch>
          </div>
        </Route>
      </Switch>
    </div>
  );

一切正常，完美。感谢大卫

【讨论】：

【解决方案2】：

首先：在您的 app.js 中您说：如果 auth == true 则显示注册/登录。在这种情况下，auth 需要为 false。然后添加一个新路由 path="*" 并将其重定向到注册作为示例。然后在 useEffect 函数的 SignUp 组件中，您说：来自 SignIn then....“ELSE”（这是错误）您说：

    setAuth(false);
    history.goBack();

所以你将 setAuth 设置为 false。在这种情况下，您永远无法从第 2 页导航回第 1 页作为示例。此页面仅在 auth 为 true 时可见。

你好，弗洛

【讨论】：