Question

我是新手做出反应。我创建了一条路线

<Switch>
    <Route path="/login" exact render={(props) => (<LoginPage test="hi" {...props}/>)} />
    <Route path="/dashboard" exact component={DashboardPage}/>
    <Route  component={LoginPage}/>
</Switch>

当我尝试使用console.log(this.props.test)时，在LoginPage中显示未定义。

请帮我解决路线上的错误。

LoginPage.js

import React from 'react';

import styles from './../styles/_login.css'

class LoginPage extends React.Component{

    constructor(props){
      super(props);
      this.handleLogin = this.handleLogin.bind(this);
      console.log(this.props.test)
    }

    componentDidMount(){
      console.log(this.props.test)
    }

    render(){
        return(
          <div>I am login form</div>
        )
    }
}

export default LoginPage;

Answer 1

不确定是这种情况，但您有LoginPage的两条路线这一个：

Route path="/login" exact render={(props) => (<LoginPage test="hi" {...props}/>)} />

这一个（没有道具传下来）：

<Route  component={LoginPage}/>

我认为你的路线错误（确保你在网址中有/login）。

你确定这是有意的吗？

修改

默认情况下将加载没有路径路径的那个

您没有将test作为道具传递给此路线，因此它显示为undefined的原因。

React router-4中未定义自定义道具

1 个答案: