Блог

У вас есть какие-либо идеи, почему он возвращает белую страницу, когда я обновляю эту страницу с идентификатором? https://jmovies.netlify.app/movie/580489 .

но когда я получаю доступ с этой страницы [https://jmovies.netlify.app/movies ][2]

[2]: https://jmovies.netlify.app/movies и перезагрузите страницу, она не вернется как пустая или белая страница. Я искал эту ошибку, но я действительно нахожу точное решение для этого.

Я также пытался добавить service worker, но все равно ничего не произошло.

ПРИМЕЧАНИЕ: в моем локальном он работает отлично, даже если я обновляю эту страницу.

В моем index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './assets/css/media.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
serviceWorkerRegistration.register();

reportWebVitals();
 

В моем App.js

 // import logo from './logo.svg';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";  
import './App.css'
import Sidebar from './components/Common/Sidebar/Sidebar'
import Header from './components/Common/Header/Header'
import Error404 from './components/Error/404' 
import {VideoPlayer} from './components/VideoPlayer/VideoPlayer' 

import { Home, 
  Single, TVShowSingle,
  SearchDetail, 
  Movies,
  TVShows
} from './pages/index'

import UseReducer from './_tests/UseReducer/UseReducer' 

function App() { 
  
  const handleClickApp = (e) => {
    e.preventDefault() 
    let sidebar = document.getElementById('sidebar')
    let overlay = document.getElementById('overlay')
    

    sidebar.classList.remove('open')
    sidebar.classList.add('closed')

    overlay.classList.remove('open')
    overlay.classList.add('closed') 
  }
  
  return (
    <Router>
      <div className="App">
        <VideoPlayer/>
        <div id="overlay" className="closed" onClick={handleClickApp}></div>
        <Sidebar></Sidebar>
        <div id="main-container">
          <Header></Header>
          <Switch> 
            <Route exact path="/" component={Home}/>
            <Route path="/movie/:id" component={Single}/>
            <Route path="/search" component={SearchDetail}/>
            <Route path="/movies" component={Movies}/>
            <Route path="/tv-shows" component={TVShows}/>
            <Route path="/tv/:id" component={TVShowSingle}/>
            <Route path="*" component={Error404}/>
          </Switch> 
        </div>
        <div className="notification">
          <span>On going TV-Shows.</span>
        </div>
      </div>
    </Router>
  
  )
}

export default App;