react-router-domで遷移先コンポーネントに値を渡したい

reactで画面遷移先に値を送りたいと思い、リンク内容この記事を参考にしていたのですが、
画像のようなエラーが出てしまいます。エラーを回避し、画面遷移先に値を渡す方法をご教授いただければ幸いです。

環境は
windows10

バージョンは
react@16.13.1
react-dom@16.13.1
react-router-dom@5.2.0
react-scripts@3.4.3
です。

javascript
1import React from 'react';
2import { BrowserRouter, Route } from 'react-router-dom';
3
4import First from './first';
5import Second from './second';
6
7
8
9class App extends React.Component {
10  constructor(props) {
11    super(props);
12  }
13
14  render() {
15    return(
16      <BrowserRouter>
17        <Route exact path="/" render={() => <First />} />
18        <Route path="/second" render={() => <Second />} />
19      </BrowserRouter>
20    );
21  }
22}
23
24
25export default App;
26

javascript
1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3
4class First extends Component{
5  constructor(props) {
6    super(props);
7    this.handleChange1 = this.handleChange1.bind(this)
8    this.handleChange2 = this.handleChange2.bind(this)
9    this.handleClick = this.handleClick.bind(this)
10    this.state = {
11      text1: "",
12      text2: ""
13    }
14  }
15
16  handleChange1(e){
17    this.setState({
18      text1: e.target.value
19    })
20  }
21
22  handleChange2(e){
23    this.setState({
24      text2: e.target.value
25    })
26  }
27
28  handleClick() {
29    this.props.history.push({
30      pathname: '/second',
31      state: { 
32        text1: this.state.text1,
33        text2: this.state.text2
34      }
35    });
36  }
37
38  render(){
39    return(
40      <div>
41        最初のページ
42        <br/>
43        <input type='text' value={this.state.text1} onChange={ (e) => this.handleChange1(e) }></input>
44        <p>{this.state.text1}</p>
45        <input type='text' value={this.state.text2} onChange={ (e) => this.handleChange2(e) }></input>
46        <p>{this.state.text2}</p>
47        <button onClick={this.handleClick}>内容確認</button>
48      </div>
49    )
50  }
51}
52
53
54
55export default withRouter(First);

javascript
1import React, { Component } from 'react';
2
3export default class Second extends Component {
4  render() {
5    return (
6      <div>
7        <p>画面遷移先のページ</p>
8        <p>{this.props.location.state.text1}</p>
9        <p>{this.props.location.state.text2}</p>
10      </div>
11    );
12  }
13}

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下のように、 Second も withRouter してからexportするように修正してみるといかがでしょうか？

diff
1  import React, { Component } from 'react';
2+ import { withRouter } from 'react-router-dom';
3
4- export default class Second extends Component {
5+ class Second extends Component {
6    render() {
7      return (
8        <div>
9          <p>画面遷移先のページ</p>
10          <p>{this.props.location.state.text1}</p>
11          <p>{this.props.location.state.text2}</p>
12        </div>
13      );
14    }
15  }
16
17+ export default withRouter(Second);