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组件。

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

Answer 1

像这样传递：

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

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

[{1}}的理由：

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

而不是将{...props}与路由器component方法一起使用。

根据DOC：

Component：

当您使用组件（而不是渲染或子项，下面）时 router使用React.createElement从中创建一个新的React元素给定的组件。这意味着如果你提供内联函数组件属性，您将在每次渲染时创建一个新组件。这导致现有组件卸载和新组件组件安装而不是仅更新现有组件。使用内联函数进行内联渲染时，请使用渲染。

Render：

这样可以方便地进行内联渲染和包装不希望的重新安装。

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

1 个答案: