Невозможно передать значение состояния через response_router4

Question

Я новичок в реагировании на JS, и мне трудно передать значение через реагирующий маршрутизатор this.props.history.push () . Вот мои файлы реакции:

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Clock from './Clock.js';
import NameForm from './NameForm.js';
import Home from './pages/Home/Home.js';
import SearchResultPage from './pages/search/SearchResularPage.js';
import { Switch, Route, BrowserRouter } from 'react-router-dom'


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'siva',
      searchText: 'sivaprakash'
    };
    //this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return (
      <div className="shopping-list">

        <BrowserRouter>

          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/SearchResultPage' render={() =>
              <SearchResultPage SearchText={this.state.searchText} />
            } />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Home.js

    import React, { Component } from 'react';
    import Header from './../../Header/Header.js'
    import './Home.css';

    class Home extends React.Component {
      constructor(props) {
        super(props);
        this.state = { date: new Date(),
                      searchText : 'fdsfsfs'
        };
      }
      handleOnClick = () => {
        // some action...
        // then redirect
        alert("yes");

        this.props.history.push({
          pathname: '/SearchResultPage',
          state: {
            hello:"okay",
          }
        });
      }


      render() {
        return (
          <div>
<button onClick={this.handleOnClick}>Pass value</button>
          </div>
        );
      }
    }

    export default Home;

SearchResularPage.js

import React, { Component } from 'react';

class SearchResultPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchValue :this.props.SearchText,
        pramvalue : props.location.state       
      };
    }

    render() {
      return (
        <div>
          {this.state.searchValue}
          {this.state.pramvalue}
        </div>

      );
    }
}

export default SearchResultPage;

Ожидаемый результат .:

При нажатии кнопки [Pass value] в Home.js будетперенаправить на следующую страницу, которая называется SearchResultPage и должна отображать "Хорошо" на странице SearchResultPage.Пожалуйста, помогите мне решить эту проблему.

Answer 1

Чтобы решить эту проблему, withRouter может использоваться следующим образом на SearchResularPage странице:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'

class SearchResultPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchValue :'',
        paramvalue : ''
      };
    }

    componentDidMount(){
      this.setState({
        searchValue: this.props.SearchText,
        paramValue: this.props.location.state
      })
    }

    render() {
      return (
        <div>
          {this.state.searchValue}
          {this.state.paramValue ? this.state.paramValue.hello : ''}
        </div>

      );
    }
}

export default withRouter(SearchResultPage);

Надеюсь, это поможет:)