리액트-라우터-돔 패스 소품을 컴포넌트에 리액트-라우터-돔 패스

리액트-라우터-돔 패스 소품을 컴포넌트에 리액트-라우터-돔 패스

라우터를 사용하여 소품을 컴포넌트에 전달해야 합니다.제 코드는 다음과 같습니다.

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

보시는 바와 같이 isAuthenticated는 Login 컴포넌트에 전달하고 싶은 프로포트를 인증했습니다.

class Login extends Component {

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

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

}

export default connect(null) (Login);

소품 로그를 작성하면 isAuthenticated 소품이 없습니다.내가 뭘 잘못하고 있지?어떻게 하면 소품을 올바르게 통과시킬 수 있을까요?나는 문서와 다른 논의들을 따랐습니다.제가 알기로는 될 것 같아요.react-router 및 react-router-dom 버전은 4.0.0입니다.

이렇게 넘겨주세요.

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

다음 날짜까지 입수할 수 있습니다.this.props.isAuthenticated[로그인 컴포넌트(Login Component)]에서 선택합니다.

이유{...props}:

이거 안 쓰면 그때만isAuthenticated는 Login 컴포넌트에 전달됩니다.라우터가 컴포넌트에 전달하는 다른 모든 값은 Login 컴포넌트 내에서 사용할 수 없습니다.우리가 글을 쓸 때{...props}모든 값을 하나의 추가 값으로 전달합니다.

그리고 사용하는 대신component라우터 사용 시render방법.

델 텔레폰 어드바이저:

컴포넌트:

(아래의 렌더 또는 자식 대신) 컴포넌트를 사용하면 라우터는 React.createElement를 사용하여 지정된 컴포넌트에서 새로운 React 요소를 작성합니다.즉, 컴포넌트 속성에 인라인 함수를 제공하는 경우 렌더링할 때마다 새 컴포넌트를 만듭니다.따라서 기존 구성 요소를 업데이트하는 대신 기존 구성 요소가 마운트 해제되고 새 구성 요소가 마운트됩니다.인라인 렌더링에 인라인 함수를 사용하는 경우 렌더를 사용합니다.

렌더링:

이것에 의해, 불필요한 재마운트 없이, 편리한 인라인 렌더링과 래핑이 가능하게 됩니다.

언급URL : https://stackoverflow.com/questions/43469071/react-react-router-dom-pass-props-to-component