Почему this.props не определено в условной маршрутизации - PullRequest
Новая
       10

Почему this.props не определено в условной маршрутизации

0 голосов
/ 18 октября 2018

Я пытаюсь создать условный маршрут, создав компонент ProtectedRoute, как описано в выбранном ответе на этот вопрос .

Условие исходит от реквизита, переданного в компонент ProtectedRoute.Пожалуйста, взгляните на компонент и код маршрутизации ниже. 

import React, {Component} from "react";
import { Route } from 'react-router-dom';
import { Redirect } from 'react-router';

class ProtectedRoute extends Component {
    render() {
      const { component: Component, ...props } = this.props

      return (
        <Route 
          {...props} 
          render={props => (
            this.props.profile.name === "admin" ?
              <Component {...props} /> :
              <Redirect to='/login' />
          )} 
        />
      )
    }
  }
export default ProtectedRoute;

Ниже показано, как выполнить маршрутизацию в отдельном компоненте боковой навигационной панели.Объект profile передается этому компоненту как реквизиты из App.js. 

<main>
      <Route path="/" exact component={props => <Home/>} />
      <ProtectedRoute path="/dashboard" component={props => <Dashboard profile={this.props.profile} />} />
</main>

Ошибка, которую я получаю при запуске вышеуказанного приложения: TypeError: _this2.props.pofile is undefined.Однако, когда я ставлю Route вместо ProtectedRoute, то есть
<Route path="/dashboard" component={props => <Dashboard profile={this.props.profile} />} />,
, приложение работает должным образом.

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

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Причина, по которой _this2.props.pofile is undefined - вы не передали его компоненту ProtectedRoute, однако вы передали его Dashboard.

Правильный способ передать его: 

<ProtectedRoute path="/dashboard" profile={this.props.profile} component={props => <Dashboard profile={this.props.profile} />} />

Кстати, не рекомендуется передавать JSX в качестве реквизита, лучше передавать его как детей: 

<ProtectedRoute path="/dashboard" profile={this.props.profile}>
  <Dashboard profile={this.props.profile} />
</ProtectedRoute>

, а затем внутри ProtectedRoute просто визуализировать {this.props.children}.

0 голосов
/ 18 октября 2018

Внутри свойства Route render вы используете функцию стрелки, которая означает, что контекст внутри него связан с экземпляром ProtectedRoute.this.props внутри render разрешить в подпорки ProtectedRoute другими словами.Чтобы решить эту проблему, вам нужно передать profile в ProtectedRoute вместо Dashboard: 

<main>
  <Route path="/" exact component={props => <Home/>} />
  <ProtectedRoute path="/dashboard" profile={this.props.profile} component={props => <Dashboard />} />
</main>
0 голосов
/ 18 октября 2018

На этой ошибке TypeError: _this2.props.pofile is undefined это pofile, а не profile

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

...