반응성이 높은 라우터 -dom 패스 구성 요소를 구성 요소에 반박하십시오.

Question

라우터를 사용하여 구성 요소에 소품을 전달해야합니다. 당신이 볼 수 있듯이, 내가 구성 요소를 로그인을 전달할 소품을 IsAuthenticated는

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> 
     ); 
    } 
} 

: 다음은 내 코드입니다. 내가 소품 로그인하면

class Login extends Component { 

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

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

} 

export default connect(null) (Login); 

는 는 소품이없는 IsAuthenticated는. 내가 뭘 잘못하고있어? 소품을 올바르게 통과시키는 방법은 무엇입니까? 나는 그 문서들과 다른 토론들을 따라 갔다. 내 이해에서 그것은 작동합니다.

이

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

그것은 로그인 구성 요소에 this.props.isAuthenticated으로 사용할 수 있어야합니다 : 의 버전이 반응 라우터 및 반응 라우터-DOM을 같은 4.0.0

Answer 1

패스가 있습니다. {...props}의

이유 : 우리는 isAuthenticated가 구성 요소를 로그인 전달 얻을 것이다 다음이를 작성하지 않는 경우

이, 라우터 구성 요소에 전달하는 다른 모든 값이 가능한 내부의 로그인 구성 요소되지 않습니다. {...props}을 쓸 때 우리는 하나의 여분의 값으로 모든 값을 전달합니다.

라우터 대신 component을 사용하는 대신 render 메서드를 사용하십시오. 당신이 구성 요소를 사용하는 경우 (대신 렌더링 또는 아이들은, 아래) 라우터가 주어진 에서 새 반작용 요소를 만들 수 React.createElement를 사용

:

으로 DOC 당 :

Component 구성 요소. 즉, 구성 요소 속성 에 인라인 함수를 제공하면 모든 렌더링마다 새 구성 요소가 만들어집니다. 기존 구성 요소를 업데이트하는 대신 기존 구성 요소를 탑재 해제하고 새로운 구성 요소를 탑재합니다. 인라인 렌더링에 인라인 함수를 사용하는 경우 렌더링을 사용하십시오.

Render

:

이것은 원하지 않는 마운트하지 않고 편리한 인라인 렌더링 및 포장이 가능

.