Блог

Как я могу изменить состояние на другой странице, когда пользователь нажимает ссылку, которая ведет его на эту страницу?

например

hompage

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

Пользователь нажимает на ссылку на главной странице, затем, когда пользователь переходит на страницу «О программе», состояние на странице «О программе» меняется с ложного на истинное, потому что пользователь нажал на ссылку на главной странице.

о странице

 const [questionone, setQuestionone] = useState(false)
 

Рамки являются Next.js.

В react нам нужно использовать атрибут вместо href в теге ссылки
, ваш тег должен выглядеть так .

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

Вы можете создать структурный код, подобный этому:

Вы должны создавать Route так, как я создавал App.js ниже:

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 компонент in. Пример кода приведен ниже:

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.jsx если вы нажмете кнопку на главной странице, чтобы изменить путь на «/о программе».