和许多人一样，我也在为部署一个路由react应用到多个页面而感到困惑。页面只是空白-没有404错误或任何东西。在控制台中，我确实得到了一些这样的错误:
错误react-dom.production.min.js: 189
at U (router.ts:5:20)
at ee (hooks.tsx:32:3)
at index.tsx:267:16
at Ei (react-dom.production.min.js:167:137)
at kl (react-dom.production.min.js:193:57)
at xu (react-dom.production.min.js:294:275)
at bc (react-dom.production.min.js:280:389)
at yc (react-dom.production.min.js:280:320)
at vc (react-dom.production.min.js:280:180)
at oc (react-dom.production.min.js:271:88)
我看了几篇关于部署路由应用程序的文章和堆栈溢出线程。我已经将主页的值更改为稍微不同的顺序，并且我已经仔细检查了repo的拼写。我运行npm运行deploy，它使构建文件夹，在ghpages上给我一个部署，然后只是一个空白屏幕。
我把HashRouter代替BrowserRouter，我添加了"basename = '/'"到HashRouter…我试过把主页的标题(minireddit)在我所有的路由路径在App.js前面。
我希望一些新鲜的眼睛会帮助-我确信这只是我犯的一些愚蠢的错误，所以任何帮助都会很感激。谢谢!
App.js:
import { HashRouter, BrowserRouter, Route, Routes } from 'react-router-dom'
(imports for pages/components/styles)
function App() {
return (
<div className="App">
<NavBar />
<div className="reddit-container">
<BrowserRouter>
<HashRouter basename = "/">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/subreddit/:name" element={<SubReddit />} />
<Route path="/search" element={<Search />} />
</Routes>
</HashRouter>
</BrowserRouter>
<SideBar />
</div>
</div>
);
}
export default App;
package.json
{
"name": "minireddit",
"homepage": "https://myusername.github.io/minireddit/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.2",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"date-fns": "^2.28.0",
"icons": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}
所以，我通过做两件事让它工作(我可能只需要一个，但在那一点上，我不在乎它为什么工作，只要它最终工作)。
-
我将BR更改为HashRouter，并移动它，以便它将所有内容包含在<container">
-
在index.js中，我已经删除了
我把它放回去了
这两个更改都有效，但我应该回去看看是否可以分离出只有其中一个是解决方案。