React Router v4:无法在 GitHub 页面上加载页面 [英] React Router v4: Cant load page on GitHub pages

问题描述

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

Locally I can browse to /buttons just fine I can even refresh it and its fine too, but when I upload the build directory to github pages I can't access /buttons and instead I get the GitHub 404 page, not my own 'notfound' page.

如果我从主页创建一个链接到/buttons，那么按钮将加载，但直接浏览它不会加载.

If I make a link from the home page to /buttons, then buttons will load, but browsing there directly it does not load.

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 中，我确实将主页定义为:

In package.json I do have the homepage defined as:

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

推荐答案

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

As per deployment docs at https://create-react-app.dev/, for GH pages:

GitHub Pages 不支持在底层使用 HTML5 pushState 历史 API 的路由器(例如，使用 browserHistory 的 React Router).这是因为当像 http://user.github.io/todomvc/todos/42，其中/todos/42是前端路由，GitHub Pages服务器返回404，因为它对/一无所知todos/42.

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42.

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

If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

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

• You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj) Read more about different history implementations of react-router.

更改您的路由:

    <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 处理 404，方法是使用特殊的重定向参数重定向到您的 index.html 页面.在部署项目之前，您需要将带有重定向代码的 404.html 文件添加到构建文件夹中，并且您需要将处理重定向参数的代码添加到 index.html.您可以在本指南中找到有关此技术的详细说明.
• Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

这篇关于React Router v4:无法在 GitHub 页面上加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！