反应路由器dom传递道具到组件

Question

我需要通过使用路由器的组件道具。这是我的代码：

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

当我记录道具时，未经验证的道具不存在。我做错了什么？我怎样才能正确地通过道具？我跟踪了文档和其他讨论。据我所知，这应该是可行的。react router和react router dom的版本为4.0.0

Answer 1

这样传递：

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

它应该通过登录组件中的this.props.isAuthenticated提供。

{…props}的原因：

若我们不写这个，那个么只有isAuthenticated将被传递到登录组件，路由器传递到组件的所有其他值将在登录组件中不可用。当我们写{…props}时，我们用一个额外的值传递所有的值。

使用渲染方法代替路由器使用组件。

根据文件：

组件：

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

提供：

这允许方便的内联渲染和包装，而无需不必要的重新填充。