React react-router-dom将props传递给组件 [英] React react-router-dom pass props to component

问题描述

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

I need to pass props to component using router. Here's my code:

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

As you can see, isAuthenticated the prop i want to pass to Login component.

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

When i log the props the isAuthenticated prop is not there. What i'm doing wrong? How can i pass the prop correctly? I followed the docs and also other discussions. From my understanding it should work. The version of react-router and react-router-dom is 4.0.0

推荐答案

传递方式如下：

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

它应该由 this.props.isAuthenticated 在登录组件中。

It should be available by this.props.isAuthenticated in Login Component.

原因 {... props} ：

Reason of {...props}:

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

If we don't write this then only isAuthenticated will get passed to Login component, all other values that router passes to component, will not be available inside Login component. When we write {...props} then we are passing all the values with one extra value.

而不是使用组件与路由器使用渲染方法。

And instead of using component with router use render method.

根据 DOC ：

组件 ：

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

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component attribute, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render.

渲染 ：

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

This allows for convenient inline rendering and wrapping without the undesired remounting.

这篇关于React react-router-dom将props传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！