javascript - 如何从另一页的链接点击更改一个页面的状态？

Question

当用户单击将他们带到该页面的链接时，我如何更改其他页面中的状态？

例如

首页

<Link href="/about">
  <button>click to go to about page</button>
</Link>

用户点击主页中的链接，然后当用户到达关于页面时，关于页面中的状态从false变为true，因为用户单击主页中的链接。

关于页面

const [questionone, setQuestionone] = useState(false)

框架是 Next.js。

Answer 1

您可以像这样创建结构代码:

您必须像我在下面的 App.js 中创建的那样创建 Route:

App.js

import { Switch, Route } from "react-router-dom";

import Homepage from "./Homepage";
import About from "./About";

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Homepage} />
      <Route path="/about" component={About} />
    </Switch>
  );
};

export default App;

然后像下面这样创建 Homepage.jsx 组件，在这种情况下，您不需要导入 Link 并使用 Link为了更改路由器的路径，在这种情况下，我使用 useHistory 来更改路由器的路径，并在这种情况下将 state 发送到路由路径的组件 /about 组件是 About.jsx:

Homepage.jsx

import { useHistory } from "react-router-dom";

const Homepage = () => {
  const history = useHistory();

  return (
    <div>
      <button
        onClick={() => {
          history.push({
            pathname: "/about",
            state: { clickedFromHome: true }
          });
        }}
      >
        click to go to about page
      </button>
    </div>
  );
};

export default Homepage;

在 About.jsx 中，您可以使用 Homepage 中的状态来更改 中的 state questionone关于 组件。示例代码如下:

About.jsx

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

const About = () => {
  const [questionone, setQuestionone] = useState(false);
  const location = useLocation();
  useEffect(() => {
    if (location.state?.clickedFromHome) {
      setQuestionone(true);
    }
  }, [location.state?.clickedFromHome]);
  console.log(location.state?.clickedFromHome);
  return <div>About{questionone.toString()}</div>;
};

export default About;

现在，如果您单击主页中的按钮将路径更改为“/about”，则 About.jsx 中的状态会发生变化