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

Question

Я работаю над проектом, после этого я должен войти в систему, отправить пользователя на страницу панели инструментов, где я должен передать данные с одной страницы на другую, у меня ошибка. я могу видеть данные с помощью инструментов разработчиков React, но когда я пытаюсь показать, у меня появляется ошибка "Ошибка типа: невозможно прочитать свойство 'состояние' из неопределенного"

--- Войти -

 handleLogin = () => {
        axios.defaults.withCredentials = true;
        let username = document.getElementById('username').value;
        let password = document.getElementById('password').value;
        const querystring = require('querystring');
        axios.post('url', querystring.stringify({
            username: username, //gave the values directly for testing
            password: password,
        }))
            .then((res) => {
                console.log(res)
                if (res.data.hasError === false) {
                    let user = res.data.result.name;     
                    this.props.history.push({
                        pathname: "/",
                       state:{
                            key:user
                       }
                    })

                } 

            }).catch((error) => {
        })
    };

--- Заголовок ---

    class UserHeader extends Component {
        render() {
            return (  
<span>
       {this.props.location.state.key}
 </span>
            );
        }
    }
    export default UserHeader;

--- index.js -----

const app = (
    <BrowserRouter>
        <Switch>     
            <Route path="/login" component={Login}/>   
            <Route  path="/" component={App}/>   
        </Switch>
    </BrowserRouter>
)

ReactDOM.render(app, document.getElementById('root'));

TypeError: Невозможно прочитать свойство 'state' из неопределенного

на странице заголовка

Answer 1

Вы можете использовать методы истории за пределами ваших компонентов.Во-первых, npm установите историю и создайте history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

в header.js, импортируйте history.js и используйте

  <span>{history.location.state.key}</span>

Answer 2

Похоже, вы пытаетесь получить состояние из обычных реквизитов, но вы должны получать их из реквизитов маршрута.Вот пример того, как это работает в моем проекте:

    <Switch>
      <Route path="/" exact render={(routeProps) => ( <BooksWrapper books={this.props.books} /> )} />
      <Route path="/edit-book" render={(routeProps) => (
         <EditBook bookInfo={routeProps.location.state.bookInfo} />
      )} />
   </Switch>

А потом я получаю их как обычный реквизит.