web-dev-qa-db-fra.com

React react-router-dom transmet les accessoires au composant

J'ai besoin de transmettre des accessoires à un composant à l'aide d'un routeur. Voici mon code:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import AppBarTop from './appbar/AppBarTop';

import Login from '../pages/login/Login';
import {BrowserRouter as Router, Route} from 'react-router-dom';


class App extends Component {

    render() {

        const { isAuthenticated } = this.props;

        return (
            <Router>
                <div>
                    <AppBarTop isAuthenticated={isAuthenticated} />
                    <div className="content">
                        <Route path="/login" isAuthenticated={isAuthenticated} component={Login} />
                    </div>
                </div>
            </Router>
        );
    }
}

Comme vous pouvez le constater, isAuthenticated est l'hôte que je souhaite transmettre au composant de connexion.

class Login extends Component {

    constructor(props) {
        super(props);
        console.log(props);
    }

    render() {
        return (
            <LoginForm />
        );
    }

}

export default connect(null) (Login);

Quand je me connecte les accessoires, le isAuthenticated prop n'est pas là. Qu'est-ce que je fais mal? Comment puis-je passer l'accessoire correctement? J'ai suivi la documentation et d'autres discussions. De ma compréhension, cela devrait fonctionner. La version de react-router et react-router-dom est 4.0.

javascriptreactjsreact-router
32
comprex

Passez le comme ça:

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/>

Il devrait être disponible d'ici this.props.isAuthenticated dans le composant de connexion.

Raison de {...props}:

Si nous n'écrivons pas cela, seul isAuthenticated sera transmis au composant Login, toutes les autres valeurs que le routeur transmet au composant ne seront pas disponibles dans le composant Login. Quand on écrit {...props} alors nous passons toutes les valeurs avec une valeur supplémentaire.

Et au lieu d'utiliser component avec un routeur, utilisez la méthode render.

Selon DOC :

Composant :

Lorsque vous utilisez un composant (au lieu de render ou d'enfants, ci-dessous), le routeur utilise React.createElement pour créer un nouvel élément React à partir du composant donné. Cela signifie que vous fournissez une fonction inline au composant. attribut, vous créez un nouveau composant à chaque rendu, ce qui entraîne le démontage du composant existant et le montage du nouveau composant au lieu de simplement mettre à jour le composant existant. Lorsque vous utilisez une fonction en ligne pour le rendu en ligne, utilisez le rendu.

Render :

Cela permet un rendu et un habillage en ligne pratiques sans le remontage indésirable.

62
Mayank Shukla