IT技术 - 将 react-router-dom 传递propsreact到组件 - 吾爱随笔录

将 react-router-dom 传递propsreact到组件

IT技术 javascript reactjs react-router

2021-02-09 00:03:31

我需要使用路由器将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 我想传递给登录组件的props。

class Login extends Component {

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

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

}

export default connect(null) (Login);

当我记录props时，isAuthenticatedprops不存在。我在做什么错？我怎样才能正确传递props？我关注了文档和其他讨论。根据我的理解，它应该可以工作。的版本做出react-router和react-router-DOM是4.0.0

1个回答

像这样传递它：

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

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

原因{...props}：

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

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

根据DOC：

组件：

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

渲染：

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

由于道具的某种原因，我变得未定义

2021-03-16 00:03:31

我有这样的： <Route path="/ShowW" render={(props) => withRouter(<ShowW {...props} isAuthenticated={true}/>)} />

2021-03-23 00:03:31

我正在尝试componentDidMount像这样阅读它console.log(this.props.isAuthenticated)

2021-04-01 00:03:31

在这种情况下，您不需要使用 withRouter，只需编写： <Route path="/ShowW" render={(props) => <ShowW {...props} isAuthenticated={true} />)} />

2021-04-03 00:03:31

其它你可能感兴趣的问题

上一篇使用 Javascript 将 CSS 样式表作为字符串注入下一篇Chrome 扩展：在内容脚本中获取页面变量