Предупреждение: Неудачный тип опоры: опора `message` помечена как обязательная в` Prompt`, но ее значение - `undefined`

Когда я нажимаю User: Питер не выполняется. показать эту ошибку.

Предупреждение: Неудачный тип опоры: опора message помечена как обязательная в Prompt, но ее значение - undefined. в подсказке (в App.js: 29) в приложении (в index.js: 7)

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;

Следите за ошибкой. У вас просто опечатка: messaage

SamVK 25.08.2018 08:23

@SamVK это работа, спасибо.

Ng Sharma 25.08.2018 08:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
707
0

Другие вопросы по теме