Passing an object to a new component with react router

Question

So far I was working with Express, and I was doing something like this:

<a href="link/:id"/>
router.get('/link/:id', (req, res, next) => {
    query(id)
        .then(queryResponse => res.render('view', {queryRes: queryResponse}))
        // ^^^ Passing the returned object into the view
});

Now I'm working with React, and I'm trying to do the same thing. So far I have this:

<Link to={`question${question.id}`} style={{display: 'block', margin: 'auto'}}
      id={question.id}>Rozwiaz to zadanie kurwo
</Link>

And this changes the url in the browser. But how can I get it to either query Firebase again, or, because I have all the data anyway, just pass it to another "view"/component (Not sure how to call it now).

Here's my full component, that lists all elements

class Questions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentItem: '',
            username: '',
            questions: []
        };
    }

    componentDidMount() {
        const questionsRef = firebase.database().ref('Works').orderByChild('available').equalTo(true).limitToFirst(10);
        questionsRef.on('value', (snapshot) => {
            let questions = snapshot.val();
            let newState = [];
            for (let question in questions) {
                newState.push({
                    id: question,
                    category: questions[question].category,
                    level: questions[question].level,
                    pointAmount: questions[question].pointAmount,
                    photoURL: questions[question].photoURL,
                });
            }
            this.setState({
                questions: newState
            });
        });
    }

    render() {
        return (
            <section className='display-question'>
                <div className='wrapper'>
                    <Router>
                        <ul style={{listStyleType: 'none'}}>
                            {/*kategoria, poziom (liceum itd), pkty, zdjecie*/}
                            {this.state.questions.map((question) => {
                                return (
                                    <li key={question.id}>
                                        <h3>Kategoria: {question.category}</h3>
                                        <p>Poziom: {question.level}</p>
                                        <p>Punkty: {question.pointAmount}</p>
                                        <img alt='' style={{width: '20%'}} src={question.photoURL}/>
                                        <Link to={`question${question.id}`} style={{display: 'block', margin: 'auto'}}
                                              bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
                                        </Link>
                                    </li>
                                )
                            })}
                        </ul>
                    </Router>
                </div>
            </section>
        )
    }
}

So I want to either pass just the id, query it in the new component, or pass the entire object (preferred), but have no idea how to do so.

Edit.

So far I have this:

<Router>
    <Link to={`questions/:${question.id}`} component={question}
          style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie kurwo
    </Link>
</Router>
<Route path="questions/:id" component={question}/>

The error I'm getting is:

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

Answer 1

If you declare a <Route path="questions/:id" component={QuestionComponent}> inside your Router, you can then retrieve the :id in your QuestionComponent in this.props.match.params.id and then query the question's data inside QuestionComponent.