#reactjs
#reactjs
Вопрос:
У меня есть приложение React, созданное create-react-app . Приложение работает нормально, но я столкнулся с проблемой
Мне нужно протестировать некоторые рекламные материалы на простом html-сайте, без дополнительного кода React. Проблема, с которой я сталкиваюсь, заключается в том, что ads.txt Google должен сканировать теги, что может занять до 24 часов на новой странице / URL, времени, которого у меня на самом деле нет.
Итак, я сделал следующее. В моем репозитории под /public папкой я добавил папку /ad-test с index.html внутренней частью. Когда я обслуживаю его локально, используя npm start и перейдя http://localhost:3000/ad-test , он работает нормально.
Отлично, подумал я и развернул его в рабочей среде, но теперь, когда я пытаюсь перейти к http://[my-site]/ad-test or http://[my-site]/yo-test/index.html , он не работает (я получаю созданный мной сайт React 404).
Я посмотрел здесь, и, если я правильно понимаю, это невозможно сделать так, как я пытался, поскольку этап сборки не будет включать общедоступную папку. Я прав в этом?
Есть идеи, как это решить?
Редактировать:
Я хорошо разбираюсь в React и React Router в целом, приложение уже использует <Switch><Route ... /></Switch> универсальный маршрут, ведущий к не найденному компоненту и нижней части.
Проблема в том, что мы включаем некоторые рекламные скрипты от поставщика рекламы. Объявления не отображаются в приложении (блокировщики рекламы полностью удалены из браузера и т. Д.), И поставщик считает, что мы допустили ошибки в коде React.
Мы не думаем, что допустили какие-либо ошибки (реклама нормально отображалась в нашей тестовой среде, но не в prod), и мы должны доказать, что React не виноват в том, что реклама не показывалась.
Для этого мы создали статический HTML-файл со всеми жестко запрограммированными объявлениями, без компонентов React или других вещей, которые могут помешать. НО из-за рекламы и сканеров Google и ads.txt Таким образом, нам нужно, чтобы статическая тестовая страница находилась в том же домене, что и наша главная страница / приложение.
Вот почему я спрашиваю, возможно ли каким-либо образом добавить статический HTML, к которому можно получить http://my.page/test-page.html доступ, не будучи «перехваченным» маршрутизатором react, т. Е. Он существует вне React, но на том же сервере.
Комментарии:
1. Вы нашли какое-либо решение для этого?
Ответ №1:
Когда вы используете react с помощью create-react-app, это означает, что вы создаете одностраничное приложение.
Это означает, что после запуска npm run build у вас будет папка сборки, в которой вызывается только один HTML-файл index.html в этом сгибе.
Это index.html не знает и не имеет никакого отношения к вашему добавленному ‘index.html — в папке ad-test.
Если вы хотите, чтобы ваш HTML-код ad-test распознавался react, вам нужно сделать его компонентом app.js и используйте react-router, чтобы указать ему путь.
Это очень просто.
Сначала установите react-router-dom;
Во-вторых, настройте react-router-dom; см. https://reacttraining.com/react-router/web/guides/quick-start
В-третьих, укажите путь к компоненту add-test.Ваш js-код должен выглядеть примерно так:
<Route path='/ad-test' component={AdTest} />
ВАЖНО:
После развертывания приложения всегда помните, что вы только что создали одностраничное приложение.
В вашем приложении есть только один HTML-код.
Пожалуйста, убедитесь, что при тестировании вашего приложения после развертывания вы должны сообщить своему поставщику услуг, что независимо от того, какой путь пользователь вводит в адресной строке, вы всегда перенаправляете его на index.html
Этап сборки включает в себя общедоступную папку:
Если у вас есть изображение в общей папке, и это изображение было импортировано в другие компоненты, оно будет показано после запуска npm run build
Надеюсь, это поможет.
Комментарии:
1. Я уже знаю, что React — это SPA и как использовать React Router, это не первое приложение React, которое я создал. Извините, если это было непонятно. Мой вопрос заключался в том, могу ли я заставить маршрутизатор каким-то образом игнорировать путь во время сборки, чтобы я мог использовать этот путь для другой HTML-страницы / файла. Но я предполагаю, что ответ заключается в том, что это невозможно.
Ответ №2:
Вы пробовали играть с конфигурациями веб-сервера? Обычно настраивается перенаправление всего трафика на index.html . Может быть, исключить ваш статический html-путь из перенаправления?
- Разместить test-page.html в общедоступной папке, например public/path-to-static-html/test-page.html
- Настройте веб-сервер для направления всего трафика на index.html ЗА ИСКЛЮЧЕНИЕМ /path-to-static-html, который будет направлен на test-page.html . Например, в случае Apache вы будете устанавливать директиву DirectoryIndex .