Reagieren-Router-Dom Pass Requisiten zu Komponente

Question

Ich muss Requisiten zu Komponente mit Router ü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, IsAuthenticated die Stütze i Komponente Login übergeben wollen.

class Login extends Component { 

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

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

} 

export default connect(null) (Login); 

Wenn ich die Requisiten log die IsAuthenticated prop nicht da ist. Was mache ich falsch? Wie kann ich die Requisite korrekt weitergeben? Ich folgte den Dokumenten und auch anderen Diskussionen. Aus meiner Sicht sollte es funktionieren. Die Version von reagieren-Router und reagieren-Router-dom ist 4.0.0

Answer 1

Pass es wie folgt aus:

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

Es sollte von this.props.isAuthenticated in LogIn-Komponente zur Verfügung stehen.

Grund des {...props}:

Wenn wir das nicht dann schreiben nur isAuthenticated wird übergeben bekommen Komponente zum Login, alle anderen Werte, die Router-Komponente passiert, wird nicht verfügbar innerhalb Anmeldung Komponente sein. Wenn wir {...props} schreiben, übergeben wir alle Werte mit einem zusätzlichen Wert.

Und statt component mit Router verwenden render Methode.

Per DOC:

Component:

Wenn Sie Komponente verwenden (anstelle von machen oder Kinder, unten) die Router verwendet React.createElement ein neues React Element aus der gegeben zu erstellen Komponente. Das bedeutet, wenn Sie dem Komponentenattribut eine Inline-Funktion zuweisen, würden Sie bei jedem Rendervorgang eine neue Komponente erstellen. Dies führt dazu, dass die vorhandene Komponente unmount wird und die neue Komponente installiert wird, anstatt nur die vorhandene Komponente zu aktualisieren. Wenn Sie eine Inline-Funktion für Inline-Rendering verwenden, verwenden Sie das Rendern.

Render:

Dies ermöglicht eine bequeme Inline-Rendering und Verpackung ohne unerwünschte Remontage.