1. Выпилить из проекта JQuery.
2. Почитать
документацию React о том как работать с формами.
3. По-хорошему, добавить в проект Redux.
Простой пример решения вашей проблемы без использования Redux:
class Main extends Component {
state = {
isInitializing: true,
isSignedIn: false,
user: null,
};
async componentDidMount() {
// тут достаем токен, например, из cookie
const token = storage.get(TOKEN_KEY);
if (token) {
// тут сетим токен в заголовки по-умолчанию библиотеки для HTTP-запросов
api.setHeader('Authorization', `Bearer ${token}`);
const user = await api.getUser();
this.setState({ user, isSignedIn: true, isInitializing: false });
} else {
this.setState({ isInitializing: false });
}
}
render() {
const { isSignedIn, isInitializing } = this.state;
// на время инициализации показываем ProgressBar
if (isInitializing) return <ProgressBar />;
return (
<code lang="html">
<Router>
<div id = 'content'>
{isSignedIn ? (
<React.Fragment>
<Route path='/feed' exact component={Feed} />
<Redirect from='/' to="/feed" />
</React.Fragment>
) : (
<React.Fragment>
<Route path='/' exact component={Auth} />
<Redirect from="/feed" to="/" />
</React.Fragment>
)}
</div>
</Router>
</code>
);
}
}
Все же, советую использовать redux. А в качестве HTTP клиента - axios.
При использовании redux процесс инициализации выносится в action:
const store = configureStore();
store.dispatch(init()); // начинаем процесс инициализации еще до монтирования приложения
ReactDOM.render(
<Provider store={store}>
<Main />
</Provider>, document.getElementById('main'),
);
