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

Question

我想在页面之间切换。
我正在推动路径和一个 {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 存储库一个 link。

谢谢

Answer 1

首先：在你的 app.js 中你说：if auth == true then show signup/signin。在这种情况下，auth 必须是 false。然后添加一个新的路由 path="*" 并将其重定向到 signup 例如。然后在你的 useEffect 函数中的 SignUp 组件中你说：来自 SignIn 然后......“ELSE”（这是错误）你说：

    setAuth(false);
    history.goBack();

因此您将 setAuth 设置为 false。在这种情况下，您永远无法从第 2 页导航回第 1 页，例如。此页面仅在 auth 为真时可见。

你好，弗洛

Answer 2

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

已删除 -

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

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

解决方案是每个 <Switch> 两个。 Route 的 Header（导航栏）结束标记 - <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>
  );

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

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

Switching pages with history.push() passing state - React Router 5

routes

history.js

reactjs

react-router

react-router-dom

已删除 -