У меня есть родительский компонент React (DeadletterQueues), который отображает двухмерный массив объектов и передает массив объектов в качестве реквизитов моему дочернему компоненту (QueueCards), а затем отображает их.
У меня есть в настоящее времярабочий код, который отображает все эти карты (начальную загрузку) на одной странице в / deadletters /.Моя цель - отобразить каждый массив карт на отдельной «странице» в / deadletters / queues /: queueName.
Похоже, что ответом на это с использованием реакции-маршрутизатора является использование URL-параметров и функции сопоставления (не знаю, как работает сопоставление).Я нашел много примеров / учебников по этому вопросу, но я использую Typescript.Я немного поигрался, и у меня возникли проблемы с адаптацией любых решений с помощью Typescript (я пробовал решение здесь , но не смог ничего с этим сделать).
interface Props {
deadletterQueues: any
}
interface State {}
@observer
class DeadletterQueues extends Component<Props, State> {
constructor(props: any) {
super(props);
}
render() {
let allQueueCards =
this.props.deadletterQueues.map((deadletters) =>
<QueueCards deadletters={deadletters} />
);
return (
<>
{allQueueCards}
</>
);
}
}
export default DeadletterQueues;
interface Props {
deadletters: any;
}
interface State {}
@observer
class QueueCards extends Component<Props, State> {
constructor(props: any) {
super(props);
}
render() {
let deadletterCards =
this.props.deadletters.map((deadletter) =>
<DeadletterCard deadletter={deadletter} />
);
return (
<div>
<h3>Name of Queue: </h3>
{ deadletterCards }
</div>
);
}
}
export default QueueCards;
Как я могу изменить свой рабочий код, чтобы вместо этого отображать свои карты на отдельных страницах для каждой очереди, используя параметры и набор текста реакции маршрутизатора?Я также использую mobx, но я не думаю, что это имеет значение здесь.
Цените любую помощь и понимание!