警告:道具类型失败:道具“消息”在“提示”中被标记为必填项,但其值是“未定义”

时间:2018-08-25 06:18:46

标签: reactjs react-router

当我单击User:Peter时,不执行。显示此错误。

警告:道具类型失败:道具messagePrompt中标记为必需,但其值为undefined。在App(在index.js:7)的Prompt(在App.js:29)

import React, { Component } from "react";
import { BrowserRouter as Router, Link, NavLink, Redirect, Prompt } from "react-router-dom";
import Route from "react-router-dom/Route";
import "./App.css";

//stateless properties in react
const User = (params) => {
  return (<h1>Welcome User {params.username}</h1>);
};

class App extends Component {
  state = {
    loggedIn: false
  }

  loginHandle = () => {
    this.setState(prevState => ({ loggedIn: !prevState.loggedIn }))
  }
  render() {
    return (
      <Router>
        <div className="App">
          <ul>
            <li><NavLink to="/" exact activeStyle={{ color: "green" }}>Home</NavLink></li>
            <li><NavLink to="/about" exact activeStyle={{ color: "green" }}>about</NavLink></li>
            <li><NavLink to="/user/JavaSpringReact" exact activeStyle={{ color: "green" }}>Java</NavLink></li>
            <li><NavLink to="/user/Peter" exact activeStyle={{ color: "green" }}>User:Peter</NavLink></li>
          </ul>

          <Prompt
            when={!this.state.loggedIn}
            messaage="Are you sure?"
          />

          <input type="button" value={this.state.loggedIn ? "Log in" : "Logout"} onClick={this.loginHandle} />
          <Route path="/" exact strict render={() => {
            return <h1>Welcome Home </h1>;
          }}
          />

          <Route path="/about" exact strict render={() => {
            return <h1>Welcome About </h1>;
          }}
          />

          <Route path="/java" exact strict render={() => {
            return <h1> Welcome To Java World</h1>;
          }}
          />

          <Route path="/user/:username" exact strict render={({ match }) => {
            return (
              this.state.loggedIn ? (<User username={match.params.username} />) : (<Redirect to="/" />)
            );
          }} />
        </div>
      </Router >
    );
  }
}

export default App;

0 个答案:

没有答案