React Router v4：无法在 GitHub 页面上加载页面

Posted 2023-03-28

【中文标题】React Router v4：无法在 GitHub 页面上加载页面

【英文标题】：React Router v4: Cant load page on GitHub pages

【发布时间】：2022-01-14 06:43:42

【问题描述】：

在本地我可以很好地浏览到 /buttons 我什至可以刷新它并且它也很好，但是当我将构建目录上传到 github 页面时，我无法访问 /buttons 而是得到 GitHub 404 页面，而不是我的自己的“未找到”页面。

如果我从主页创建到 /buttons 的链接，按钮会加载，但直接在那里浏览不会加载。

import React,  useState  from 'react';
import  BrowserRouter, Switch, Route  from 'react-router-dom';
import  Context  from "./components/context";
import  Layout  from "./components/layout";
import  Home  from './routes/home';
import  Buttons  from './routes/buttons';
import  NotFound  from './routes/notfound';

const Router: React.FC = () => 

  const [global, setGlobal] = useState(
    language: localStorage.getItem("language") || 'en',
    apiUrl: 'https://api.domain.com/api',
    loggedIn: localStorage.getItem("jwt") ? true : false,
    redirectUrl: '',
    modal: false,
    modalState: '',
  );

  return (
    <Context.Provider value= global, setGlobal >
      <BrowserRouter basename=process.env.PUBLIC_URL>
        <Route render = ( location ) => (
          <Layout location =  location >
            <Switch location =  location >
              <Route exact path = '/' component =  Home  />
              <Route exact path = '/buttons/' component =  Buttons  />
              <Route component =  NotFound />
            </Switch>
          </Layout>
        ) />
      </BrowserRouter>
    </Context.Provider>
  );

export  Router ;

在 package.json 中，我确实将主页定义为：

"homepage": "https://myName.github.io/myRepo",

【问题讨论】：

您是否尝试过删除 basename 属性？

是的，如果我删除它，那么默认路由 / 显示 NotFound 路由并且 /buttons 仍然无法访问

【参考方案1】：

根据https://create-react-app.dev/ 的部署文档，对于 GH 页面：

GitHub Pages 不支持在底层使用 html5 pushState 历史 API 的路由器（例如，使用 browserHistory 的 React Router）。这是因为当 @987654322@ 之类的 URL 重新加载页面时，其中 /todos/42 是前端路由，GitHub Pages 服务器返回 404，因为它对 /todos/42 一无所知。

如果您想将路由器添加到托管在 GitHub Pages 上的项目，这里有几个解决方案：

您可以从使用 HTML5 历史 API 切换到使用哈希路由。如果你使用 React Router，你可以切换到 hashHistory 来实现这个效果，但是关于 react-router 的不同历史实现，URL 会更长更详细（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）Read more。

从以下位置更改您的路由：

    <BrowserRouter basename=process.env.PUBLIC_URL>
      <Route render = ( location ) => (
         <Layout location =  location >
             <Switch location =  location >
                <Route exact path = '/' component =  Home  />
                <Route exact path = '/buttons/' component =  Buttons  />
                <Route component =  NotFound />
              </Switch>
           </Layout>
       ) />
    </BrowserRouter>

收件人：

import  HashRouter, Route, Link  from "react-router-dom";

...


    <HashRouter basename=process.env.PUBLIC_URL>
      <Route render = ( location ) => (
         <Layout location =  location >
             <Switch location =  location >
                <Route exact path = '/' component =  Home  />
                <Route exact path = '/buttons/' component =  Buttons  />
                <Route component =  NotFound />
              </Switch>
           </Layout>
       ) />
    </HashRouter>
...

或者，您可以使用一个技巧来教 GitHub Pages 通过使用特殊的重定向参数重定向到您的 index.html 页面来处理 404。在部署项目之前，您需要将带有重定向代码的404.html 文件添加到构建文件夹，并且您需要将处理重定向参数的代码添加到index.html。您可以在this guide 中找到有关此技术的详细说明。

【讨论】：

将 BroswerRouter 更改为 HashRouter 对我有用。谢谢！