javascript - React Router onEnter 未按预期工作

Question

我正在构建一个基本的 react 登录应用程序，用于教育目的，并验证我正在使用 React-router 的 onEnter prop 功能的路线

import axios from 'axios';    

var Authentication = (nextState, replace, callback) => {
    axios.get('/api/getuser')
    .then((res) => {
        if(res.data != '') {
          replace('account/wall')
        }
        callback()
    })
    .catch((err) => {
        callback()
    })

}

export default (
  <Route component={Root}  >
      <Route path='/' component={Home} onEnter={Authentication}/>
      <Route path='/login' component={Login} onEnter={Authentication}/> 
      <Route path='/signup' component={Registration} onEnter={Authentication}/> 
      <Route path='/account/wall' component={Wall}/>
      <Route path='*' component={Notfound} />
  </Route>

);

一切都按预期工作，但我不明白为什么路由器渲染 Home 组件一眨眼，然后将路由替换为 /account/wall当我尝试 /登录后的路线？？如果我尝试 /login 也会发生同样的事情或/signup登录后，有办法解决此行为吗？

我已经尝试通过渲染空 <div> 在 componentWillMount 方法中验证用户身份(这不是我猜的 react 方式)来解决这个问题检查用户时，但这也会呈现空白页面一眨眼，这不是正确的方法。

所以我只想渲染/account/wall如果用户在没有任何中间件渲染的情况下进行身份验证。我能做什么？？

Answer 1

我无法编写确切的示例，因为每个人的实现都不同，但我将纠正一个 HelloWrapper 组件示例，它包装任何组件，如果它接收到 sayHello 属性为 true，它会渲染 Hello 而不是实际的组件，您可以检查登录属性并重定向或显示登录组件..根据您的情况。

1. 编写一个函数，将实际组件中的 props 复制到包装器

HoistNonReactStatistics.tsx 或 jsx(我使用 typescript )

    const REACT_STATICS = {
    childContextTypes: true,
    contextTypes: true,
    defaultProps: true,
    displayName: true,
    getDefaultProps: true,
    mixins: true,
    propTypes: true,
    type: true
    };

    const KNOWN_STATICS = {
    name: true,
    length: true,
    prototype: true,
    caller: true,
    arguments: true,
    arity: true
    };

    export default function hoistStatics(targetComponent, sourceComponent) {
    var keys = Object.getOwnPropertyNames(sourceComponent);
    for (var i = 0; i < keys.length; ++i) {
      const key = keys[i];
      if (!REACT_STATICS[key] && !KNOWN_STATICS[key]) {
        try {
          targetComponent[key] = sourceComponent[key];
        } catch (error) {}
      }
    }
    return targetComponent;
    }

编写将返回包装组件的包装函数

 import * as React from 'react';
 import HoistNonReactStatistics from "./HoistNonReactStatistics"
 export function HelloWrapper(){

 return function HellowWrapComponent(DecoratedComponent) {

 class WrappendComponent extends React.Component<{sayHello?:boolean},{}>{
    constructor(props){
      super(props);
    }
    componentWillMount(){
     /** do some login check here and redirect if required **/
     }
    componentWillReceiveProps(nextProps){
     /** do some login check here and redirect if required **/
     }
   render(){
     if(this.props.sayHello){
       return <div>Hello</div>
     }else{
       return <DecoratedComponent />
     }
   }
 }
 /** if you use redux then also apply the connect method on return component so it get access to required auth reducer data**/
 return HoistNonReactStatistics(WrappendComponent,DecoratedComponent);
 }
}

创建一个 const (不确定 jsx 是否需要此步骤，但是 typescript 不允许直接包装组件，因为我没有声明包装函数来接受参数

导出 const requireHellow = HelloWrapper();

现在用函数扭曲任何组件，我在导出时使用了它，但您也可以在 Route 的组件属性中执行此操作

导出默认 requireHellow(SomeComponent);

现在，每当您使用此 SomeComponent 并且它的 sayHello 属性为 true 时，它都会渲染 Hello，否则渲染实际组件