Итак, я начал свой проект как одностраничное приложение React. Но оказывается, что было бы удобнее иметь базовый сервер для рендеринга страниц и иметь реальную маршрутизацию.
Кроме того, у меня есть некоторые переменные, которые должны быть доступны со всех страниц, и поместить их в качестве реквизита для всех компонентов очень тяжело. Поэтому отправка их со страницами может быть решением.
Поэтому я добавил Express, и теперь я могу рендерить базовую HTML-страницу с ним.
Но я не знаю, как я собираюсь связать свой компонент реагирования с этим HTML-файлом. Или передайте ему необходимые переменные.
Я использовал response-router-dom, но он не поддерживает обновление страницы. И это не помогает иметь глобальные переменные, которые должны быть доступны из всех компонентов.
Здесь, в моем index.js, вы можете увидеть, как я рендерил свой основной html-файл, а также в конце и прокомментировал, как был обработан мой реагирующий компонент перед добавлением express.
app.use(express.static('public'));
router.get('/', function(req, res, next) {
res.sendFile('./public/views/loginView.html' , { root : __dirname});
});
app.use(router);
app.listen('8080');
// const wrapper = document.getElementById("app");
// wrapper ? ReactDOM.render(<App />, wrapper) : false;
Вот мой loginView.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- links and scripts -->
<title>The login page</title>
</head>
<body>
<div id="app">
content
</div>
</body>
</html>
Есть ли простой способ связать мой html-файл с его компонентом реагирования и отобразить его?
Если нет, есть ли другой способ сделать некоторые переменные (которые не являются константами) доступными из каждого реагирующего компонента (возможно, реакт-редукса)?