Использование пакетов
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
authState: null,
};
}
mutateAuthState = () => {
this.setState({
authState: true,
});
}
render() {
return (<Routes authState={this.state.authState} mutateAuthState={this.mutateAuthState} />)
}
}
Routes.js
class Routes extends React.Component {
render() {
return (
<React.Fragment>
<BrowserRouter >
<Switch>
<Route path="/login" exact render={ () => <Login authState={this.props.authState}
mutateAuthState={this.props.mutateAuthState}/>
} />
<Route path="/" exact render={ () => <div><a href="/login" >login</a></div> } />
</Switch>
</BrowserRouter>
</React.Fragment>
);
}
}
Login.js
class Login extends Component {
handleSubmit = async (event) => {
this.props.mutateAuthState(true)
}
render() {
switch(this.props.authState) {
case true : return (<Redirect to="\" />)
default : return(
<button onClick={this.handleSubmit} >Login </button>
)
}
}
}
Требуется конечный результат - при нажатии кнопки входа в Login.js переменная состояния authState в App.js будет иметь значение true.
Приложение перезапустит Routes.js после изменения состояния.
Внутри маршрутов,поскольку URL-адрес по-прежнему / login, компонент Login отображается.
Внутри Login, поскольку this.props.authState теперь имеет значение true, происходит перенаправление на "/".
Но яполучаю DOMException в веб-консоли
Ошибка: DOMException: не удалось выполнить replaceState для «History»: объект состояния истории с URL «http:« не может быть создан в документе с источником »http://localhost:3000' и URL 'http://localhost:3000/login'.
Это правильная архитектура для аутентификации в React?