Почему мое приложение выдает пустую страницу в рабочей среде?

#reactjs #heroku #react-router-dom

#reactjs #heroku #react-router-dom

Вопрос:

Итак, я создаю это многостраничное приложение react, используя react-router-dom.

 const routing = (
   <Router>
       <>
           <Switch>
               <Route exact path='/' component={App}></Route>
               <Route path='/orders' component={Orders}></Route>
               <Route path='/inquiries/:id' component={Inquiries}></Route>
               <Route component={NotFound}></Route>
           </Switch>
       </>
   </Router>
)

ReactDOM.render(routing, document.getElementById('root'));
  

Как вы можете видеть, есть страница под названием «запросы». У которого есть параметр ‘id’. Который формирует URL-адрес маршрута / запросы /:id .

Маршрут отлично работает в среде разработки; Но в рабочей среде (heroku) он выдает мне белую страницу без ошибок консоли. В чем эта проблема?

Ответ №1:

вы можете использовать process.env.PUBLIC_URL так:

 <BrowserRouter basename={process.env.PUBLIC_URL}>
  <App />
</BrowserRouter>
  

в будет делать то же самое, что и это:
<Route точный путь={process.env.PUBLIC_URL ‘/’} компонент={Приложение}>
следите за тем, чтобы на главной странице была ссылка на ваш сайт, например:

 "homepage": "https://someone.github.io/theName/",
  

помните, что этот пример домашней страницы используется на github, но он должен выглядеть так

Комментарии:

1. Тогда, если я заменю домашнюю страницу на «.» на » someone.github.io/theName » это должно сработать.

2. сделать домашнюю страницу: «.» не очень хорошая идея, рекомендуемый способ — в некоторых случаях указать URL-адрес сайта, это сработает, но это ваша главная проблема и почему у вас пустая страница. «Свойство домашней страницы используется для указания целевой страницы для»

Ответ №2:

Я мог бы решить эту проблему, удалив

 "homepage": ".",
  

в файле package.json. Думал, что это как-то связано с этим.