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

Posted 2023-02-21

【中文标题】React react-router-dom 将 props 传递给组件

【英文标题】：React react-router-dom pass props to component

【发布时间】：2017-09-14 02:37:50

【问题描述】：

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

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 我想传递给登录组件的道具。

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

【参考方案1】：

这样传递：

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

登录组件中的this.props.isAuthenticated 应该可以使用它。

...props的原因：

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

并且不要将component 与路由器一起使用，而是使用render 方法。

根据DOC：

Component:

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

Render:

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

【讨论】：

由于道具的某种原因，我变得不确定

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

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

这种情况下不需要使用withRouter，直接写：<Route path="/ShowW" render=(props) => <ShowW ...props isAuthenticated=true />) />