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

Я пытаюсь передать значения реквизита, доступные моему компоненту, в ссылку на мой ответный маршрутизатор, но я не вижу никакого значения, заполняемого в ключе 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>
        )
    }
}

reactjs react-router

10.07.2019 02:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

323

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 имеет только следующие.

компонент
рендеринг: функция
дети: весело
путь: строка | нить[]
точный: бул
строгий: бул
местонахождение: объект
чувствительный: логическое значение

Спасибо за исчерпывающий ответ. Имеет смысл!

— 11.07.2019 02:16

10.07.2019 03:20

Другие вопросы по теме

Исключить путь от реактивного маршрутизатора <Router/>

React Router не кодирует амперсанд, а кодирует пробелы в параметрах пути

Как написать перенаправление внутри перехватчиков axios без перезагрузки в React JS

React Native Error: история свойства не существует

React Router не переключается на небазовые маршруты

Почему меняется мой URL, но не мой компонент

Почему изменение состояния в App.js вызывает перемонтирование компонента?

Почему, когда я вхожу с пустой корзиной, выдается ошибка с .map?

Как передать параметр в URL и вызвать с ним API?

Условный рендеринг сопоставленных маршрутов

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

Ответы 1

Другие вопросы по теме

Похожие вопросы