React this.props undefined

У меня довольно стандартная настройка, роутер со страницами

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from "react-router";

import Layout from "./pages/Layout";
...
import User from "./pages/User";

ReactDOM.render(
    <Router history={history}>
      <Route path="/" component={Layout}>
        <IndexRoute component={...}/>
        <Route path="project/create" component={...}/>
        <Route path="project/:id" component={...}/>
        <Route path="user/:id" component={User}/>
        <Route path="*" component={...}/>
      </Route>
    </Router>,
    document.getElementById("app-root"));

Все работает отлично, за исключением тех случаев, когда я захожу на страницу, подобную site.tld/#/user/5 компонент User имеет некоторые проблемы с правильной реализацией. Все остальные страницы работают, у меня также есть другая страница, которая использует параметры URL (project/:id), и она также работает нормально.

import React from "react";
...

export default class User extends React.Component {

  constructor() {
    super();

    console.log(this);

    ...
  }

  render() {
    return ...
  }

Это то, что я получаю в консоли

Я уверен, что это самая глупая вещь когда-либо снова, но я не могу выбрать это...

Ответ 1

Я думаю, что вам не хватает следующего, попробуйте заменить ваш конструктор

constructor(props) {
    super(props);

    console.log(this.props)
}

Попробуйте, вы должны получить выход из this.props

Конструктор для компонента React вызывается до его монтирования. При реализации конструктора для подкласса React.Component вы должны вызывать super (props) перед любым другим оператором. В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Ответ 2

Я столкнулся с той же проблемой, которую решил, изменив свой компонент, так как компонент должен передать state с помощью привязки attribute, а затем получить доступ с помощью props,

component= {()=> <AboutUs leaders={this.state.leaders}/> }

полный маршрут будет

<Route path="/aboutus" component= { ()=> <AboutUs leaders={this.state.leaders}/> } />

Если проблема с :id решена с помощью, вы можете изменить в соответствии с вашим user/:id,
это отвечает на ваш вопрос,

<Route path="/menu/:dishId" component= {DishWithId}/>

использовать как,

const DishWithId = ({match}) => {
      return(
          <DishDetail dish={this.state.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId,10))[0]} 
            comments={this.state.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId,10)) } 
          />
      );
    }