React Routervs {Component}

Question

У меня есть список предметов.Когда пользователь нажимает на один из элементов, он переносит его на страницу, содержащую только этот элемент.Например:

Questions компонент:

render() {
    return (
        <section id='loopContainer' className='display-question'>
            <div className='wrapper'>
                <ul style={{listStyleType: 'none'}}>
                    {
                        this.state.questions.map(question => {
                            return (
                                <li key={question.id}>
                                    <h3>Kategoria: {question.category}</h3>
                                    <p>Poziom: {question.level}</p>
                                    <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                                    <img alt='' style={{width: '20%'}} src={question.photoURL}/>
                                    <p>{question.workText}</p>
                                    <Link to={`/question/${question.id}`}
                                          style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </section>
    )
}

Question компонент:

render() {
    return (
        this.state.questions.map(question => {
            return (
                <section key={question.id} className='display-question'>
                    <div className='wrapper show-grid'>
                        <h3>Kategoria: {question.category}</h3>
                        <p>Poziom: {question.level}</p>
                        <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                        <Col xs={12} md={6}>
                            <img alt='' style={{width: '100%'}}
                                 src={question.photoURL}/>{/*Need 100% for the ratio*/}
                            <p>{question.workText}</p>
                        </Col>
                        <Col xs={12} md={6}>
                            <form onSubmit={this.handleSubmit}>
                                <textarea name="textAnswer" id="textAnswer" style={{
                                    width: '100%',
                                    height: '50vh',
                                    background: 'white',
                                    color: 'black'
                                }}/>
                                <input id="file-upload" type="file"/>
                                <Button type='submit' style={{display: 'block'}}>Wyslij odpowiedz</Button>
                            </form>
                        </Col>
                    </div>
                </section>
            )
        })
    )
}

Вот как я пытаюсь запросить базу данных:

const itemsRef = firebase.database().ref('Works')
                         .orderByChild('firebaseKey')
                         .equalTo(this.props.match.params.id);

Проблема в моем Navigation компоненте.Именно здесь:

<Switch>
    <Route exact path="/about" component={AboutComponent}/>

    <Route exact path="/questions" render={
        () => (firebase.auth().currentUser === null ?
            <Redirect to='/'/> : <QuestionsComponent/>)
    }/>

    <Route exact path='/question/:id' render={
        () => (firebase.auth().currentUser === null ?
            <Redirect to='/'/> : <QuestionComponent/>)
    }/>

    <Route exact path="/" component={HomeComponent}/>
</Switch>

Итак, проблема в том, что, когда я пытаюсь перейти на страницу с одним элементом, выдается ошибка:

<Route exact path='/question/:id' render={
    () => (firebase.auth().currentUser === null ?
        <Redirect to='/'/> : <QuestionComponent/>)
}/>

Ошибка: TypeError: this.props.match is undefined.

Но если я сделаю это так:

<Route exact path='/question/:id' component={QuestionComponent}/>

Все работает хорошо.

Так почему первый способ дает ошибку, а второй - просто отлично??А как мне заставить работать второй способ?

Answer 1

Когда вы используете реквизит рендеринга, он дает вам реквизиты Маршрутизатора в качестве параметров, которые вам необходимо передать вашему пользовательскому компоненту, который использует их как

<Route exact path="/questions" render={
    (props) => (firebase.auth().currentUser === null ?
        <Redirect to='/'/> : <QuestionsComponent {...props}/>)
}/>

В случае component проп,Маршрут автоматически передает реквизиты маршрутизатора нижележащему компоненту.