将 React 应用程序部署到 github 页面正在发布一个空白页面

Question

我在本地机器上创建了一个个人网站，但我现在无法部署以将其发布到 github 页面。

网站仓库：https://github.com/vkodangattil/website

当我访问https://vkodangattil.github.io/website/ 时，我得到的只是一个空白页面，尽管我知道这个应用程序在 localhost 上运行良好。不知道该怎么做，我相信我在 package.json 文件中添加了正确的行，但我可能是错的。任何帮助将不胜感激

Answer 1

首先，您的所有路由都有相同的路径，因此您的路由只会选择第一个匹配的路径。

function App() {
  return (
    <>
      <Router>
        <Navbar />
          <Route path='/' exact component=
          {Home} />
          <Route path='/' exact component=
          {AboutMe} />
          <Route path='/' exact component=
          {Resume} />
          <Route path='/' exact component=
          {Contact} />
      </Router>
    </>
  );
}

这是因为 GitHub 页面选择主页 URL 作为您的根路径，但是当它使用 /website 路径加载时。即使加载了 HTML，它也无法在空白页面中找到任何匹配的 URL 结果。

要调整该 baseUrl，您需要将 basename 添加到 BrowserRouter。

您的最终更改应该是：

import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './components/pages/Home';
import Resume from './components/pages/Resume';
import AboutMe from './components/pages/AboutMe';
import Contact from './components/pages/Contact';

function App() {
  return (
    <>
      <BrowserRouter basename="/website">
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about-me" component={AboutMe} />
          <Route path="/resume" component={Resume} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </BrowserRouter>
    </>
  );
}

export default App;