First thing I want to say is that method setItem accepts two parameters, of which the first is the name of the key, the second is the meaning. As for the fact that you don't change the condition of the component App - It's hard to say. Why is it hard? Because there's little detail. Used your code as a basis and set a simple working example in which he checked how it works and whether the component's condition changes. App♪The first is the index file from which the entry point of the Annex begins:import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";
ReactDOM.render(<App />, document.getElementById("app"));
It's primitive and simple, it's got its component and it's backed up. Next, we move to the very component and the basic truths I have made. Pay attention to the routing. In the first place, if the user of the collateral is to identify the home home page (to illustrate, split the lease into two parts - the first for the collateral user, the second opposite).import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from "react-router-dom";
import LogonForm from "./LogonForm.jsx";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedIn: !!localStorage.getItem("loggedIn")
};
this.handleLogIn = this.handleLogIn.bind(this);
this.handleLogOut = this.handleLogOut.bind(this);
}
handleLogIn() {
this.setState({ loggedIn: true });
localStorage.setItem("loggedIn", true);
}
handleLogOut() {
this.setState({ loggedIn: false });
localStorage.removeItem("loggedIn");
}
render() {
if (this.state.loggedIn) {
return (
<Router>
<Switch>
<Route
exact
path="/"
render={() => (
<div>
<div>Home page for logged in user</div>
<button onClick={this.handleLogOut}> Logout </button>
</div>
)}
/>
<Redirect to="/" />
</Switch>
</Router>
);
}
return (
<Router>
<div>
<Switch>
<Route
exact
path="/login"
render={() => <LogonForm handleLogIn={this.handleLogIn} />}
/>
<Route
exact
path="/registration"
render={() => <div> Registration </div>}
/>
<Redirect to="/login" />
</Switch>
</div>
</Router>
);
}
}
export default App;
The component itself LogonForm I kind of left no special change. fetch and then just summoned the method transmitted through the props:import React from "react";
import { Link } from "react-router-dom";
export default class LogonForm extends React.Component {
constructor(props) {
super(props);
this.state = {
login: "",
password: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { name, value } = event.target;
this.setState({ [name]: value });
}
handleSubmit(event) {
event.preventDefault();
const { login, password } = this.state;
console.log("login", login);
console.log("password", password);
this.props.handleLogIn();
}
render() {
return (
<form className="form" onSubmit={this.handleSubmit}>
<div className="form__title">Вход в систему</div>
<label>
Логин:
<input
className="form__input"
type="text"
name="login"
value={this.state.login}
onChange={this.handleChange}
minLength="6"
required
/>
</label>
<label>
Пароль:
<input
className="form__input"
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange}
required
/>
</label>
<div className="form__btn">
<input className="btn" type="submit" value="Вход" />
<Link className="btn" to="/registration">
Регистрация
</Link>
</div>
</form>
);
}
}
Now, a little explanation, what's wrong. It's very important to learn how to fix your application from the beginning, to put the stop points, to put it in the console, it's very useful. In your initial code example, the condition of the component App It's a success story, but you have a mistake in the rolling. Yeah, there's no reins, and after you get on the login page, you just don't have anything going on, you're still in the address line. /login And that's it, even after the logic, you So I added a little diversity to the Routings, and you can use the code and try to use this approach. I strongly recommend that the rolling documentation be consulted: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md
