将 React 应用程序发布到 Github 页面的问题

Question

好的，所以当我运行 npm run deploy 时，所有步骤都遵循了，它说已发布......很棒。

检查 Github 托管链接，奇怪的是它实际上只显示我的导航栏组件，没有别的。 正如您在下面 app.js 中的路由器所看到的，它应该显示导航栏元素和 RecipeList 组件。 手动输入路由会导致 404。

app.js -

import React from 'react';
import './App.css';
import Navbar from './Component/Navbar/Navbar';
import RecipeList from './Component/RecipeList/RecipeList';
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import RecipeItemDetails from './Component/RecipeItemDetails/RecipeItemDetails';



function App() {
  return (
    <BrowserRouter>
    <Switch>
    <div className="App">
      <Navbar/>
      <Route exact path="/" component={RecipeList} />
      <Route path="/recipes" component={RecipeList} />
      <Route path="/recipes/:id" component={RecipeItemDetails} />
    </div>
    </Switch>
    </BrowserRouter>
  );
}

export default App;

package.json -

{
  "name": "gmcb-react",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://Wrecket.github.io/GMCB-react-conversion",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "save-dev": "0.0.1-security"
  },

谁能告诉我我可能会犯什么业余错误？

Answer 1

我认为这篇文章将有助于解释我针对我的一个项目的ghpage部署的类似问题。

基本上，您需要利用<BrowserRouter/>的 basename 属性让<Routes/>像在 ghpages 上本地一样工作，特别是将值设置为；

basename={process.env.PUBLIC_URL}