React React-router-dom将道具传递给组件

小编典典

React React-router-dom将道具传递给组件

javascript

我需要使用路由器将道具传递到组件。这是我的代码：

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道具不存在。我做错了什么？如何正确通过道具？我关注了文档以及其他讨论。据我了解，它应该可以工作。的版本 做出反应路由器 和 反应路由器-DOM 是 4.0.0

阅读 601

2020-05-01

共1个答案

小编典典

像这样传递它：

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

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

原因{...props}：

如果我们不编写此代码，则只isAuthenticated会将其传递给Login组件，而路由器传递给该组件的所有其他值将在Login组件中不可用。当我们写时，{...props}我们将所有的值传递一个额外的值。

并且代替component路由器使用render方法。

根据DOC

组成部分：

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

渲染：

这样可以方便地进行内联渲染和包装，而无需进行不必要的重新安装。

2020-05-01