当我单击User:Peter时,不执行。显示此错误。
警告:道具类型失败:道具message
在Prompt
中标记为必需,但其值为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;