Réagissez Routeur/Redux/HOC ne fonctionne pas avec 'prop'

Question

J'utilise le routeur de réaction v4 et j'essaie d'enrouler ma tête autour d'un problème lié au routeur de réaction/redux/HOC. J'ai un composant d'ordre supérieur qui fonctionne. Le HOC lui-même est connect() -ed à redux store. Cette approche fonctionne parfaitement si je le fil dans un <Route /> via un component prop: <Route path="/profile" component={ withAuth(Profile) } /> fonctionne.

Cependant, lorsque je tente de faire la même chose avec un <Route /> et un rendu prop il ne pas travail: <Route path="/profile" render={() => withAuth(Profile) } /> La console lance « Route.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. » Il fonctionne quand j'omettez le HOC: <Route path="/profile" render={() => <Profile /> } /> si je soupçonne un problème le HOC mais je ne peux pas le trouver.

La raison pour laquelle j'essaie d'utiliser render, c'est que je souhaite transmettre des accessoires supplémentaires au COH. D'ailleurs ça m'embête de ne pas pouvoir trouver le bug.

Est-ce que quelqu'un avec un oeil frais peut jeter un coup d'oeil et me mettre sur le bon chemin? Merci!

/* === app.js === */ 

import React, { Component } from 'react'; 
import { Route } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 

import Header from './header'; 
import Home from './home'; 
import Content from './about'; 
import Profile from './profile'; 
import withAuth from './withAuth'; 

import store from '../reducers/store'; 

export default class App extends Component { 
    render() { 
     return (
      <Provider store={store}> 
       <div className="mdl-grid"> 
        <Header /> 
        <main className="mdl-layout__content"> 
         <div className="page-content"> 
          <Route path="/" exact component={Home} /> 
          <Route path="/about" component={Content} /> 
          <Route path="/profile" render={() => withAuth(Profile) } /> 
         </div> 
        </main> 
       </div> 
      </Provider> 
     ) 
    } 
} 



/* === withAuth.js (Higher order component) === */ 

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Redirect } from 'react-router-dom'; 

const HOC = WrappedComponent => { 
    return class extends Component { 
     render() { 
      if (this.props.auth) { 
       return <WrappedComponent authenticated={this.props.auth} {...this.props} /> 
      } else { 
       return <Redirect to="/" /> 
      } 
     } 
    } 
} 

function mapStateToProps({ auth }) { 
    return { auth }; 
} 

export default WrappedComponent => connect(mapStateToProps)(HOC(WrappedComponent)); 

Answer 1

La raison pour laquelle il ne fonctionne pas est parce que, ici

<Route path="/profile" render={() => withAuth(Profile) } /> 

rendu est effectivement attribué une withAuth fonction et non la valeur retournée. Ce que vous devez faire est

const AuthProfile = withAuth(Profile); 

export default class App extends Component { 
    render() { 
     return (
      <Provider store={store}> 
       <div className="mdl-grid"> 
        <Header /> 
        <main className="mdl-layout__content"> 
         <div className="page-content"> 
          <Route path="/" exact component={Home} /> 
          <Route path="/about" component={Content} /> 
          <Route path="/profile" render={ (props) => <AuthProfile {...props}/> } /> 
         </div> 
        </main> 
       </div> 
      </Provider> 
     ) 
    } 
} 

La différence entre

render={() => withAuth(Profile) } 

et

render={ (props) => <AuthProfile {...props}/> } 

est que dans le premier cas, sa fonction de flèche qui est liée au contexte. Alors que dans le second cas c'est une fonction qui retourne un composant

Answer 2

Je pense que votre problème est avec la façon dont vous utilisez <Redirect />, vous devez le mettre dans <Route />. Regardez cet exemple:

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