我需要使用路由器将道具传递到组件。这是我的代码:
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
像这样传递它:
<Route path="/login" render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} />
它应该this.props.isAuthenticated在“登录组件”中可用。
this.props.isAuthenticated
原因{...props}:
{...props}
如果我们不编写此代码,则只isAuthenticated会将其传递给Login组件,而路由器传递给该组件的所有其他值将在Login组件中不可用。当我们写时,{...props}我们将所有的值传递一个额外的值。
isAuthenticated
并且代替component路由器使用render方法。
component
render
根据DOC
组成部分:
当您使用组件(而不是下面的渲染器或子组件)时,路由器将使用React.createElement从给定的组件中创建一个新的React元素。这意味着,如果您向component属性提供内联函数,则将在每个渲染中创建一个新组件。这将导致现有组件的卸载和新组件的安装,而不仅仅是更新现有组件。使用内联函数进行内联渲染时,请使用渲染。
渲染:
这样可以方便地进行内联渲染和包装,而无需进行不必要的重新安装。