Question

我是ReactJS的新手，对不起，如果之前有人问这个问题，我不知道从哪里开始。

我遵循以下的Auth指南： https://reacttraining.com/react-router/web/example/auth-workflow

我正在使用react-router来处理使用ReactJS的导航，我有一个处理导航的index.js文件，包括：

import {BrowserRouter, Redirect, Route} from 'react-router-dom';
import Auth from './components/Auth';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    Auth.authenticate((auth) => {
      if (auth) {
        (<Component {...props}/>)
      }
      else {
        (<Redirect to={{
          pathname: '/',
          state: { from: props.location }
        }}/>)
      }
    })
  )}/>
)

const App = () => (<BrowserRouter>
  <div>
    {/* PUBLIC */}
      <Route path={'/'} exact component={Inicio}/>
      <Route path={'/login'} component={Login}/>

    {/* PRIVATE */}
      <PrivateRoute path="/dashboard" component={Dashboard}/>

  </div>
</BrowserRouter>);

ReactDOM.render(<App/>, document.getElementById('root'));

导航很好，但Auth.authenticate中的身份验证（（auth）..没有正常工作并抛出错误。

它指的是具有以下内容的文件：

import React from 'react';
import http from '../services/http';

const Auth = {
  authenticate(cb) {
    http.authenticate((e, auth) => {
      if (auth === true) {
        cb(true);
      }
      else {
        cb(false);
      }
    });
  }
}

export default Auth;

http.aunthenticate是一个带回调的方法，效果很好。

但是我在控制台中收到以下错误消息：

> The above error occurred in the <Route> component:
>     in Route (created by PrivateRoute)
>     in PrivateRoute (created by App)
>     in MuiThemeProvider (created by App)
>     in div (created by App)
>     in Router (created by BrowserRouter)
>     in BrowserRouter (created by App)
>     in App
> 
> Consider adding an error boundary to your tree to customize error
> handling behavior. Visit https://reactjs.org/docs/error-boundaries.html to learn
> more about error boundaries. react-dom.development.js:9747 Error:
> Route(...): Nothing was returned from render. This usually means a
> return statement is missing. Or, to render nothing, return null.

有什么想法吗？谢谢！

Answer 1

您的PrivateRoute组件永远不会返回任何内容。 Auth.authenticate((auth) =>...这是异步的，因此它与您的方法在render响应方面为空是一样的。您应该避免这样做，只需要一个属性来检测帐户是否已登录。例如，这是我使用Facebook的Flux商店编写PrivateRoute组件的方式。

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      AccountStore.loggedIn ? (
        <Component {...props} />
      ) : (
          <Redirect to={{
            pathname: '/signin',
            state: { from: props.location }
          }} />
        )
    )} />
  )

此处，我的组件将始终根据在呈现之前计算的帐户状态返回一些内容。

编辑：在下面添加我的AccountStore以更清楚地了解具体细节，这里我使用通过远程api进行身份验证后收到的jwt令牌，并使用它是否设置来确定用户是否已登录。但是，它可以是您选择的任何属性/值。甚至可以是一个没有连接任何东西的类，只是通过几种方法来翻转用户登录状态。

import Immutable from 'immutable';
import { ReduceStore } from 'flux/utils';
import AccountActionTypes from './AccountActionTypes';
import CoreDispatcher from '../CoreDispatcher';

import LocalStorage from '../../io/LocalStorage';

class AccountStore extends ReduceStore {
  constructor() {
    super(CoreDispatcher);

    this._jwt = LocalStorage.getItem('jwt');
  }

  getInitialState() {
    return Immutable.OrderedMap({
      jwt: this._jwt,
    });
  }

  reduce(state, action) {
    switch (action.type) {
      case AccountActionTypes.USER_DETAILS_IN:
        console.log('user details in');
        this._user = action.user;
        return state.set('user', this._user);

      case AccountActionTypes.USER_LOGGED_IN:
        this._jwt = action.jwt;
        return state.set('jwt', this._jwt);

      case AccountActionTypes.USER_LOGGED_OUT:
        this._jwt = null;
        return state.set('jwt', this._jwt);

      default:
        return state;
    }
  }

  get jwt() {
    return this._jwt;
  }

  get loggedIn() {
    return !!this._jwt;
  }
}

export default new AccountStore();

在那里使用Flux Stores和Dispatcher的更多细节：https://facebook.github.io/flux/

Answer 2

它就像一个简单的语法错误：

const Auth = {
  authenticate(cb) {
    http.authenticate((e, auth) => {
      if (auth === true) {
        cb(true);
      }
      else {
        cb(false);
      }
    });
  }
}

您需要将Auth定义为有效的React组件（类或函数）。你所拥有的不是有效的类，函数或对象。

更重要的是，如果Auth没有呈现某些jsx，那么它不应该是React组件。 HTTP请求应定义为类方法，并在生命周期钩子内部调用，最常见的是componentDidMount()。 Article explaining how to make AJAX requests in react

Reactjs react-router验证failling

2 个答案: