Не удается прочитать свойство 'params' из неопределенного, React

Question

У меня проблема, я передаю (IMO) в props в правильном направлении, но у меня все еще есть эта ошибка:

У меня есть эти строки кода в моем App.js

Этот работает:

           <Route path="/users/:username" 
               render={(props) => <Profile  isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props} />}>
           </Route>

Но этот не работает, при рендеринге "Ride" я получаю ошибку

        <Route path="/ride/:username" 
          render={(props) => <Ride  isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props} />}>
        </Route>

Ошибка: TypeError: Невозможно прочитать свойство 'params' из неопределенного

  43 |    }
  44 |      
  45 |    componentDidMount() {
> 46 |        const username = this.props.match.params.username;
  47 | ^      this.loadUserProfile(username);
  48 |    }
  49 | 

Даже если код внутри (компоненты), они одинаковы ...

Answer 1

Я предоставляю решение вашей текущей проблемы, но, в зависимости от вашей цели, возможно, вы захотите немного изменить свой код.Вы получаете undefined для вашего Ride компонента, потому что для него есть дополнительный рендер.Здесь:

.....
    <div style={{ display: "flex", justifyContent: "center" }}>
        <h6>Made by Konrad Krukar</h6>
    </div>
    <Ride />   <-------- SEE
</Layout>
....

Это в вашем App компоненте.Так как он не обернут Router, вы не можете получить желаемый реквизит.Я не знаю, какова цель его рендеринга, но вы можете использовать withRouter, может быть.

Answer 2

В некоторых случаях проверьте, завернули ли вы компонент в withRouter

, например, с помощью redux

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(ComponentName)
);

или просто в функциональный компонент

export default withRouter(ComponentName);

Answer 3

Другой альтернативой, которую вы можете попробовать, является использование инструментов разработчика React (если вы этого еще не сделали) и посмотрите, как выглядят реквизиты.Пользователь выше меня также предложил войти в консоль, что также поможет нам выяснить, в чем проблема.Прямо сейчас в текущем состоянии приложения оно не может прочитать свойство match.

Если я правильно читаю, нет ли проповеди под названием 'match', передаваемой вашему компоненту?