Как сохранить состояние формы в компоненте с помощью response-router

Question

У меня есть СПА с несколькими маршрутами. Каждый из этих маршрутов является родительскими компонентами для 2 дочерних элементов (компонент формы и компонент таблицы, который отображает данные, полученные из API). Цель состоит в том, чтобы иметь возможность вернуться к форме с заполненными полями, как и раньше, если пользователь уйдет от нее.

Вот что у меня есть. Мой index.js:

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

return (
            <Switch>
                <Route exact path="/" component={Landing} />
                <Route path="/onDemandProductSearch" component={OnDemandProductSearch} />
            </Switch>
        );

OnDemandProductSearch.js компонент имеет 2 дочерних элемента, как указано выше. Я отображаю только форму, и после выбора параметров в форме отображаю таблицу с извлеченными данными.

class OnDemandProductSearch extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            products: [],
            isSearched: false
        };
    };

    onFiltersSelected = (products, queryParams) => {
        this.setState({
            products: products,
            isSearched: true
        });
        
        this.props.history.push({
            search: queryParams
        });
    };

    render() {
        return (
            <div>
                <Header />
                {this.props.history.location.search === "" ?
                    <OnDemandProductSearchMenu onFiltersSelected={this.onFiltersSelected} /> :
                    <InstanceList products={this.state.products} />}
            </div>
        );
    };
};

OnDemandProductSearchMenu.js,

fetch(`${apiURL}/simple-products/search`, {
            // body here
            })
        })
            .then((response) => {
                // more logic here 
            })
            .then((data) => {
                // I build a parameter string here I want the table component to be rendered with. This is important to the app
                var paramString = `.....`; 

                this.props.onFiltersSelected(data, paramString);
            })
            .catch((error) => {
                console.log(error);
            });

Я читаю документы для реакции -router, но было непонятно, как именно работает history. Я понимаю, что маршрут необходимо поместить в историю, но как мне это сделать, поскольку компонент формы не будет иметь доступа к history?

Answer 1

Есть несколько разных способов получить доступ к истории ...

Вот что вы можете сделать:

1. Создайте файл с именем history.js в src и поместите туда этот код:

   import { createBrowserHistory } from 'history';
   
   export default createBrowserHistory();
   

2. import Router not BrowserRoouter в вашем index.js и используйте его вместо этого. Также import history from './history' и передайте его как опору в Router, например:

   import { Router } from 'react-router-dom'; // not BroswerRouter
   
       ReactDOM.render(
         <Router history={history}>
           <App />
         </Router>,
         document.getElementById('root')
       );
   

Теперь у вас есть история, доступная вам в любом месте. Просто импортируйте историю в любой компонент и используйте history.pu sh ()

Например, в вашем OnDemandProductSearch просто импортируйте историю

import history from './history';

class OnDemandProductSearch extends React.Component {
    {......}
    
    onFiltersSelected = (products, queryParams) => {
        this.setState({
            products: products,
            isSearched: true
        });
        
        history.push({
            search: queryParams
        });
    };

    {......}
};