Параметр React Router Props не отображается

Question

Я пытаюсь передать значения реквизита, которые доступны моему компоненту, в мою ссылку активного маршрутизатора, но я не вижу, чтобы какое-либо значение заполнялось в ключе params реквизита, связанного со ссылкой. Что-то не так я делаю с разделом <Link> или <Route>? Я не вижу ошибок, которые бы указывали на неправильную настройку

Вот мой код:

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import AnnotationCard from './AnnotationCard';

//Annotation Card - Body
export default class AnnotationBody extends React.Component {
    render() {

        const type = this.props.type.toLowerCase();

        return (
            <Router>
            <div>
                <div className="row d-flex p-1">
                    <div className="col-md-12">
                        <h3> <Link to="annotations" params={{ annotationId: this.props.linkId }} className={"text-" + type}>{this.props.title}</Link></h3>
                    </div>
                </div>
            </div>
            <Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />
            </Router>
        )
    }
}

Answer 1

Ваш маршрут,

<Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />

И ваша ссылка для этого маршрута:

<Link to="annotations" params={{ annotationId: this.props.linkId }} className={"text-" + type}>{this.props.title}</Link>

Здесь ваш link не будет работать, так как в маршруте, который вы определяете path='/app/annotation/:annotationId', а в ссылке вы используете только to="annotations", поэтому ваша ссылка в конечном итоге будет иметь значение base_url/annotations в вашем браузере и, вероятно, 404 - page not found error, поскольку у вас нет маршрута для этого.

Согласно Документам ,

Если вы хотите передать параметры своей ссылке, вы должны сделать это,

<Link to={`/app/annotation/${this.props.linkId}`} className={"text-" + type}>{this.props.title}</Link>  //considering associate route for this link is with `path='/app/annotation/:annotationId'`

Примечание: Вы не можете передать name на Route, проходя здесь,

<Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />

Согласно документам ,

Route имеет только следующее.

1. компонент
2. render: func
3. дети: func
4. путь: строка | Строка []
5. точно: bool
6. строгий: bool
7. расположение: объект
8. чувствительный: bool