Перенаправление с реквизитами - React Router - Невозможно прочитать свойство 'реквизит' из неопределенного

Question

Я хочу перенаправить на указанный c компонент (с именем SingleBook) и отправить несколько реквизитов (bookId). Я использую: "react-router-dom": "^5.1.2"

Следуя инструкции https://reacttraining.com/react-router/web/api/Redirect, я должен написать что-то вроде:

return <Redirect
    to={{
        pathname: "/book",
        state: { "bookId": "bookId" }
    }}
  />

И в моих маршрутах:

<Route path="/book" render={(props) => <SingleBook {...props}/>}/>

Тогда на моем перенаправленном компоненте я смогу получить реквизит, выполнив что-то вроде:

const bookId = this.props.location.state.bookId

ОДНАКО

Это ДЕЛАЕТ правильно перенаправить на <SingleBook>, но я получаю сообщение об ошибке: Cannot read property 'props' of undefined

Я также попытался определить мои маршруты как:

<Route path="/book" component={SingleBook}/>

, но я получаю ту же ошибку

Компонент SingleBook

import React, {useEffect} from "react"
import Grid from '@material-ui/core/Grid';

function SingleBook({props}) { // I tried also without {props}

    const bookId = this.props.location.state.bookId


    console.log(bookId)

    return(
        <Grid>
            single book {bookId}
        </Grid>
    )
}
export default SingleBook

Answer 1

Поскольку вы используете функциональные компоненты, у вас нет доступа к this, вы получаете реквизиты в качестве аргумента для функционального компонента. Так что этот код будет работать:

function SingleBook(props) { // Access props here without the {}

    const bookId = props.location.state.bookId; // No `this`


    console.log(bookId)

    return(
        <Grid>
            single book {bookId}
        </Grid>
    )
}
export default SingleBook

Answer 2

import React from "react"
import Grid from '@material-ui/core/Grid';

const SingleBook = () => {
    let {location: {state : {bookId} = {}} = {}} = this.props;
    let bookId = bookId;
    console.log(bookId)

    return(
        <Grid>
            single book {bookId}
        </Grid>
    )
}
export default SingleBook