Как сохранить состояние переменной между компонентами в React

Question

В настоящее время у меня есть три различных компонента, таких как A, B, C, и мне нужно передать информацию от A до C через B. Я могу передать, но у меня возникают проблемы, когда я нажимаю кнопку возврата, значения теряются, ятакже получить некоторые неопределенные ошибки:

Вот как я перехожу от cmp A к cmp B (как выглядит компонент A):

 this.state = {
            selectedIndustry: '',
            selectedJob: '' 
 }

<Link to={{
          pathname: '/information-job',
          state: {industry: this.state.selectedIndustry, job: this.state.selectedJob}
                        }}>
          <Button className={"primaryBtn"}>
                Apply
          </Button>
</Link>



 onIndustryChangeOption(event) {
        this.setState({selectedIndustry: event.target.value});
    }

    onJobChangeOption(event) {
        this.setState({selectedJob: event.target.value});
    }

В компоненте B на componentDidMound у меня есть: console.log(this.props.location.state) // распечатывает как отрасль, так и работу

Дело в том, что когда я перехожу из этого компонента B в C и затем нажимаю кнопку "Назад", то this.props.location.state неимеют какое-либо значение, поэтому в основном я потерял значения от goint для одного компонента к другому.

Каков наилучший способ добиться такого, чтобы я мог сохранять значения, даже когда я возвращаюсь к компоненту

Answer 1

РЕДАКТИРОВАТЬ: рабочий пример: https://codesandbox.io/s/l50l0zxn6q

Я бы обернул все в компонент Root и изменил бы только потомки этого компонента Root по URL.

Что происходит, когда вынажмите на кнопку «назад», this.props.location.state, очевидно, пусто, так как вы ничего не передавали со своей опорой.

Чтобы исправить это, нужно иметь компонент Root, который будет поддерживать некоторое состояниестраницы.Вы также можете использовать Redux для этого, если хотите.

Итак, что вы хотите, это примерно так:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

// Link does not allow overriding onClick as it is used internally by react-router
// add div inside Link and add onClick prop to div
const A = props => (
  <div>
    <Link to='/B'>
      <div onClick={() => props.setRootState({ test: 'foo' })}>
        Go to /B
      </div>
    </Link>
    {JSON.stringify(props.rootState)}
  </div>
)

const B = props => (
  <div>
    <Link to='/A'>
      <div onClick={ () => props.setRootState({ test: 'bar' }) }>
        Go to /A
      </div>
    </Link>
    {JSON.stringify(props.rootState)}
  </div>
)

class Root extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      test: '',
    }
  }

  render() {
    const DefaultComp = () => <Link to="/A">go to A</Link>

    // don't forget to bind this to setState
    const PageA = () => <A rootState={this.state}
      setRootState={this.setState.bind(this)} />
    const PageB = () => <B rootState={this.state}
      setRootState={this.setState.bind(this)} />

    return (
        <Switch>
          <Route exact path="/" component={ DefaultComp } />
          <Route path="/A" component={ PageA } />
          <Route path="/B" component={ PageB } />
        </Switch>
    )
  }
}

ReactDOM.render(
  <Router>
    <Root />
  </Router>,
  document.getElementById("root")
);

Например, у вас есть постоянное состояние по URL-адресам, которое могут использовать компоненты каждой страницы.доступ и изменение при необходимости.

Пожалуйста, дайте мне знать, если я допустил ошибку, я пробовал код, и поведение таково, что состояние будет меняться при нажатии на ссылки, но не на кнопку "Назад" вашегобраузер.Также дайте мне знать, если есть что-то, что трудно понять, или я полностью неправильно понял, о чем вы просили;)

Приветствия и удачи!

РЕДАКТИРОВАТЬ: преобразованный код в реагирующий маршрутизатор;должен работать как положено