404 反应路由器路径的渲染问题

Question

我是新手，使用钩子、上下文 API 和路由器在“https://imvsr-0609.github.io/google-search-clone/”上创建了一个谷歌搜索克隆，但我在之后面临的问题部署是它在手动输入 URL 时不会在不同的路径呈现组件 像： 它的渲染'/' 但不是“/搜索” 它在 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"
     ]
  }
}