Reagiere React-Router-Dom Requisiten an Komponente weitergeben

Ich muss Requisiten über einen Router an die Komponente übergeben. Hier ist mein 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>
        );
    }
}

Wie Sie sehen können, ist isAuthenticated die Requisite, die ich an die Login-Komponente übergeben möchte.

class Login extends Component {

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

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

}

export default connect(null) (Login);

Wenn ich die Requisiten anmelde ist authentifiziert Stütze ist nicht da. Was mache ich falsch? Wie kann ich die Stütze richtig übergeben? Ich habe die Dokumente und auch andere Diskussionen verfolgt. Nach meinem Verständnis sollte es funktionieren. Die Fassung von reagieren-router und reagieren-router-dom ist 4.0.0

Übergeben Sie es so:

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

Es sollte bis verfügbar sein this.props.isAuthenticated in der Login-Komponente.

Grund von {...props}:

Wenn wir das nicht schreiben dann nur isAuthenticated werden an die Login-Komponente übergeben, alle anderen Werte, die der Router an die Komponente weitergibt, sind in der Login-Komponente nicht verfügbar. Wenn wir schreiben {...props} dann übergeben wir alle Werte mit einem zusätzlichen Wert.

Und anstatt zu verwenden component mit Routernutzung render Methode.

Gem DOC:

Komponente:

Wenn Sie „component“ (anstelle von „render“ oder „childs“, unten) verwenden, verwendet der Router „React.createElement“, um ein neues React-Element aus der angegebenen Komponente zu erstellen. Das heißt, wenn Sie dem Komponentenattribut eine Inline-Funktion bereitstellen, würden Sie bei jedem Rendern eine neue Komponente erstellen. Dies führt dazu, dass die vorhandene Komponente demontiert und die neue Komponente montiert wird, anstatt nur die vorhandene Komponente zu aktualisieren. Wenn Sie eine Inline-Funktion für das Inline-Rendering verwenden, verwenden Sie render.

Machen:

Dies ermöglicht ein bequemes Inline-Rendering und Wrapping ohne unerwünschtes Remounten.