React Router v4 - Невозможно прочитать параметры свойства undefined
Я новичок в React. Мне просто нужно получить параметр пути из URL-адреса при загрузке страницы. Мой URL-адрес выглядит следующим образом.
http://localhost:3000/explorer/test/111
Я проложил следующий маршрут,
<Route
exact path = "/explorer/test/:id"
component = {() => <BlockPage />}
/>
Затем в компоненте <BlockPage /> мне нужно получить значение :id, когда компонент загружается. Поэтому я добавил следующий сегмент кода, чтобы получить идентификатор, но он дает мне ошибку, как в заголовке.
import React, { Component } from 'react';
import NavigationComp from './Navigation';
import { withRouter } from 'react-router-dom';
const BlockPage = () =>
<div>
<NavigationComp/>
<BlockData />
</div>
class BlockData extends Component {
componentDidMount() {
console.info(this.props.match.params.id);
}
render(){
return(.....)
}
}
export default withRouter(BlockPage);
Какую ошибку я сделал? Кто-нибудь может мне объяснить? Моя цель - получить значение 111 из URL-адреса в componentDidMount()
Ответы 4
когда вы хотите использовать компонент, вам не нужна функция, как код, вы можете изменить ее следующим образом:
<Route
exact path = "/explorer/test/:id"
component = {<BlockPage />}
/>
или используйте функцию рендеринга, если вам нужна такая функция
<Route
exact path = "/explorer/test/:id"
render = {(props) => <BlockPage {...props} />}
/>
тогда в this.props.match.params вы можете получить доступ к своему идентификатору.
Как я могу получить доступ к: id в componentDidMount ()?
@SajithaLiyanage, вы используете функцию render, о которой я говорю?
@SajithaLiyanage, мой следующий вопрос: если вы console.info(this.props), что вы видите в консоли? пожалуйста, введите эту строку в BlockPage componentDidMount
@SajithaLiyanage, а что, если вы удалите withRouter и просто экспортируете компонент
Я пробовал оба случая, в console.info (this.props) выдает пустой объект.
Я нашел проблему. Проблема здесь. const BlockPage = () => <div> <NavigationComp/> <BlockData /> </div> Маршрутизатор подключается к компоненту BlockPage. Но моя функция componentDidMount находится в компоненте BlockData. Я думаю, что нужно передать реквизит с BlockPage на BlockData. Вы можете объяснить мне, как я могу это сделать?
Это происходит потому, что ваш компонент является подкомпонентом другого компонента, который знает ReactRouter. Например,
<BrowserRouter>
<Switch>
<Route path = "/Feedback">
<Switch>
<BrowserRouter>
в приведенном выше определении маршрута объект соответствия в компоненте Feedback не равен нулю, но если у нас есть другой компонент в обратной связи и мы пытаемся получить к нему доступ, это будет ошибкой.
https://stackoverflow.com/a/57628327/12378703 это работает отлично ... попробуйте это
<Route
exact path = "/explorer/test/:id"
render = {(props) => <BlockPage {...props} />}
/>
Это решило мою проблему:
<CPAroute exact path = "/advcampaigns/:id" component = {AdvCampaigns}/>
class AdvCampaigns extends React.Component {
constructor(props) {
super(props);
this.state = {
activePage: 1
};
};
componentDidMount() {
console.info(this.props.**computedMatch**.params.id);
}
}
Не могли бы вы мне это объяснить? Я меняю маршрут, как и во втором методе, который вы упомянули, но для меня это остается той же ошибкой. (TypeError: невозможно прочитать параметры свойства undefined)