React router - не уничтожать компонент при переходе к другому компоненту

132
27 августа 2019, 05:50

Есть форма на react и еще пара страниц, если пользователь начинает заполнять форму, а потом перейдет на другую страницу, то у компонента формы вызывается событие componentWillUnmount и компонент стирается вместе со всеми заполнеными данными. По возвращению обратно на страницу с формой придется все заполнять заново. Собственно вопрос как предотвратить вызов componentWillUnmount или как не потерять уже введенные данные.

Для примера набросал небольшой пример jsfiddle.net. Здесь если я начну вводить данные в поле в компоненте Home, а потом перейду на About, то по возвращению поле будет пустым

class App extends React.Component { 
  constructor(props) { 
    super(props) 
 
    this.Router = window.ReactRouterDOM.BrowserRouter ; 
    this.Link = window.ReactRouterDOM.Link; 
    this.Route = window.ReactRouterDOM.Route; 
  } 
   
  render() { 
    return ( 
 <this.Router> 
      <div> 
        <ul> 
          <li> 
            <this.Link to="/">Home</this.Link> 
          </li> 
          <li> 
            <this.Link to="/about">About</this.Link> 
          </li> 
        </ul> 
 
        <hr /> 
 
        <this.Route exact path="/" component={Home} /> 
        <this.Route path="/about" component={About} /> 
      </div> 
    </this.Router> 
    ) 
  } 
} 
 
function Home() { 
  return ( 
		<input type="text"/> 
  ); 
} 
 
function About() { 
  return ( 
    <div> 
      <h2>About</h2> 
    </div> 
  ); 
} 
 
ReactDOM.render(<App />, document.querySelector("#app"))

Answer 1

Как-то так, то, что Вам нужно находится в компоненте Home:

index.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import { BrowserRouter as Router } from "react-router-dom"; 
import App from "./App"; 
 
ReactDOM.render( 
  <Router> 
    <App /> 
  </Router>, 
  document.getElementById("root") 
);

app.js

import React, { Component } from "react"; 
import { NavLink, Switch, Route } from "react-router-dom"; 
import Home from "./Home"; 
import About from "./About"; 
 
export default class App extends Component { 
  render() { 
    return ( 
      <> 
        <div> 
          <NavLink exact to="/"> 
            Home 
          </NavLink> 
          <NavLink to="/about">About</NavLink> 
        </div> 
        <div> 
          <Switch> 
            <Route exact path="/" component={Home} /> 
            <Route exact path="/about" component={About} /> 
          </Switch> 
        </div> 
      </> 
    ); 
  } 
}

home.js

import React, { Component } from "react"; 
 
let foo = { name: "" }; 
 
export default class Home extends Component { 
  constructor(props) { 
    super(props); 
    this.state = foo; 
  } 
 
  handleChange = e => { 
    this.setState({ name: e.target.value }); 
  }; 
 
  componentWillUnmount = () => { 
    foo = this.state; 
  }; 
 
  render() { 
    return ( 
      <input type="text" onChange={this.handleChange} value={this.state.name} /> 
    ); 
  } 
}

about.js

import React, { Component } from "react"; 
 
export default class About extends Component { 
  render() { 
    return <h2>Hello from about</h2>; 
  } 
}

P.S. Ссылка на CodeSandBox (Тут удобнее посмотреть на результат);

P.S.S Код не по Вашему примеру, но суть одна.

P.S.S. Если требуется объяснение - напишите в комментариях, добавлю комментарии к коду

READ ALSO
Сумма порядковых номеров букв (ABCM: 1 + 2 + 3 +13 = 19)
javascript

Сумма порядковых номеров букв (ABCM: 1 + 2 + 3 +13 = 19)

Дан массив JavaScript: [Natasha, Device, Auto,

 145
Отправка base64 строки с сервера на клиент
javascript

Отправка base64 строки с сервера на клиент

Есть задачаНа странице есть input type file

 145
Изограмма в Javascript [закрыт]
javascript

Изограмма в Javascript [закрыт]

Нужно написать функцию,которая определяет, изограмма ли данный текст (слово) или нет, то есть в нем повторяются буквы или нет

 113
Вызвать подфункцию в js
javascript

Вызвать подфункцию в js

Есть js функция модального окна внутри, которого есть такие функции как открыть, закрыть модальное окноТеперь надо при нажатии на <button class="choose">ok</button>...

 112