У меня есть приложение реагирования, которое в методе входа в систему должно перенаправлять на / profile route.Путь меняется, но компонент Profile не рендерится.Я думаю, что это может быть что-то с упорядочением маршрутов или с использованием точного пути или нет.Я попытался с помощью и от реакции-маршрутизатор-дом.Обновление страницы работает, но выходит из системы текущего пользователя.Ссылки работают с навигационной панели, а не this.props.history.push (/ profile).Спасибо!
class App extends Component {
constructor(props){
super(props)
this.state = {
currentUser: null,
loggedIn: false,
unauthorizedUser: false
}
this.handleLoginSubmit = this.handleLoginSubmit.bind(this);
}
async handleLoginSubmit(e) {
e.preventDefault()
const url = 'http://localhost:3000/auth/login';
const options = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: e.target[0].value,
password: e.target[1].value
})
}
await fetch(url, options)
.then(res => res.status === 200 ? res.json() : "Unauthorized")
.then(payload => {
if (payload !== "Unauthorized") {
window.localStorage.setItem("token", payload.token)
this.setState({ loggedIn: true,
currentUser: payload.user.id,
unauthorizedUser: false,
userfirstName: payload.user.firstName,
userlastName: payload.user.lastName
});
console.log('current user is ' + this.state.currentUser)
this.props.history.push(`/profile`);
} else {
this.setState({ loggedIn: false, unauthorizedUser: true })
}
})
.catch(err => {
console.log(err);
})
}
render() {
return (
<div className="App">
<Router>
<div>
<Nav loggedIn={this.state.loggedIn} handleLogout={this.handleLogout}/>
<Route exact path='/profile' render={props => <Profile {...props} currentUser={this.state.currentUser} firstName={this.state.userfirstName} lastName={this.state.userlastName}/>} />
<Route exact path='/' render={props => <HomePage {...props} handleLoginSubmit={this.handleLoginSubmit}
handleSignUpSubmit={this.handleSignUpSubmit} unauthorizedUser = {this.state.unauthorizedUser} signUpError = {this.state.signUpError}
loggedIn={this.state.loggedIn}/>}/>
<Route exact path='/update' render={props => <UpdateUser {...props} currentUser={this.state.currentUser}/> }/>
<Route exact path='/createoutfit' render={props => <AddOutfit {...props} currentUser={this.state.currentUser}/> }/>
<Route exact path='/items' component={Items} />
<Route exact path='/items/new' render={props => <AddItem {...props} currentUser={this.state.currentUser}/> } />
<Route exact path='/outfits' render={props => <Outfit {...props} currentUser={this.state.currentUser}/> }/>
<Route exact path='/add/itemstoOutfit' render={props => <AddItemsToOutfit {...props} currentUser={this.state.currentUser}/> }/>
<Route exact path='/items/upload' component={FileUpload}/>
</div>
</Router>
</div>
);
}
}
export default withRouter(App);