Question

我正在尝试通过创建ProtectedRoute组件来创建条件路由，如this question的所选答案所描述。

该条件来自传递到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} />} />，
该应用程序按预期工作。

有人可以通过指出我做错了什么来帮助我吗？那将不胜感激。

Answer 1

在Route的{{1}}属性中，您使用了箭头函数，这意味着该函数内部的上下文绑定到render的实例。换句话说，ProtectedRoute中的this.props解析为render的道具。要解决此问题，您需要将ProtectedRoute传递给profile而不是ProtectedRoute：

Dashboard

Answer 2

此错误TypeError: _this2.props.pofile is undefined是pofile而不是profile

在某些地方您可能会定义错误的错字。

Answer 3

_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}。

为什么在条件路由中未定义this.props

3 个答案: