React react-router-dom将props传递给组件

Question

我需要使用路由器将props传递给组件.这是我的代码:

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组件的prop.

class Login extends Component {

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

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

}

export default connect(null) (Login);

当我记录道具时,isAuthenticated道具不存在.我做错了什么？我怎样才能正确通过道具？我跟着文档和其他讨论.从我的理解,它应该工作.的版本做出反应路由器和反应路由器-DOM是4.0.0

Answer 1

像这样传递:

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

它应该this.props.isAuthenticated在登录组件中可用.

原因{...props}:

如果我们不写这个,那么只会isAuthenticated传递给Login组件,路由器传递给组件的所有其他值将不会在Login组件中可用.当我们写入时,{...props}我们将所有值传递给一个额外的值.

而不是使用component路由器使用render方法.

根据DOC:

组件:

当您使用组件(而不是下面的render或children)时,路由器使用React.createElement从给定组件创建新的React元素.这意味着如果为组件属性提供内联函数,则每次渲染都会创建一个新组件.这导致现有组件卸载和新组件安装,而不是仅更新现有组件.使用内联函数进行内联渲染时,请使用渲染.

渲染:

这允许方便的内联呈现和包装而没有不期望的重新安装.