如何通过单击另一页的链接更改一页中的 state？

Question

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

例如

主页

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

用户点击主页中的链接，然后当用户到达关于页面时，由于用户点击了主页中的链接，关于页面中的 state 由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 来更改About组件中的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;

现在 state 在About.jsx中发生了变化，如果你点击主页上的按钮将路径更改为“/about”

Answer 2

在 React 中我们需要在 Link 标签中使用 to attribute 而不是 href
你的标签应该是这样的。

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