Блог

Я новичок в react и создал клон поиска Google по адресу «https://imvsr-0609.github.io/google-search-clone /» использование перехватов, контекстного API и маршрутизатора, но проблема, с которой я сталкиваюсь после развертывания, заключается в том, что он не отображает компоненты по разным путям при вводе URL вручную, например: его рендеринг «/», но не «/ search», это сработалохорошо в localhost, но не после развертывания. Любые усилия по оказанию помощи будут высоко оценены,

вот мой app.js код:

  import React from 'react'
 import {BrowserRouter as Router , Switch , Route} from 'react-router-dom'
 import HistoryContextProvider from './context/historyContext'
 import SearchContextProvider from './context/searchcontext'
 import HistoryPage from './pages/HistoryPage/historypage'
 import HomePage from './pages/homepage/homepage'
 import ImagePage from './pages/ImagePage/imagepage'
 import SearchPage from './pages/searchpage/searchpage'

 function App() {
   return (
       <div className="App">
        <HistoryContextProvider>
          <SearchContextProvider>
            <Router basename={process.env.PUBLIC_URL}>
              <Switch>
                <Route exact path='/search/images'>
                  <ImagePage/>
                </Route>
                <Route exact path='/search'>
                  <SearchPage/>
                </Route>
                <Route exact path='/'>
                  <HomePage/>
                </Route>
                <Route exact path='/search/history'>
                  <HistoryPage/>
                </Route>
                </Switch>
              </Router>
            </SearchContextProvider>
          </HistoryContextProvider>
        
  
       </div>
   );
 }

export default App;
 

и мой package.json:

   {"name": "google-clone",
   "homepage": "https://imvsr-0609.github.io/google-search-clone",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
     "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-uuid": "^1.0.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
     "predeploy": "npm run build",
      "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
     ]
   },
   "browserslist": {
     "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
     ],
    "development": [
     "last 1 chrome version",
     "last 1 firefox version",
    "last 1 safari version"
     ]
  }
}