React:在gh页面上使用react-router进行客户端路由 [英] React: client-side routing with react-router on gh pages

问题描述

我遇到了在React Create App文档中讨论的问题，即使用HTML5 pushState历史记录API的路由器将如何在静态文件服务器上发生故障，而不将其配置为每次都提供index.html服务.如何在使用github页面时解决此问题?另外我没有使用Create React App或react-scripts

I am having the problem discussed in the React Create App docs about how routers that use the HTML5 pushState history API will fail on static file servers without configuring it to serve index.html everytime. How can I fix this problem while using github pages? Also I'm not using the Create React App or react-scripts

我尝试将基本名称添加到BrowserRouter组件

I have tried adding a basename to the BrowserRouter component

<BrowserRouter basename={process.env.PUBLIC_URL}>

对此问题的更好解释:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-路由

推荐答案

在GitHub页面上使用 react-router-dom 时，您需要使用

When using react-router-dom with GitHub pages, you'll need to use HashRouter instead of BrowserRouter. It uses the # fragment of the URL to keep the route, circumventing the lack of support for pushState on GH pages.

(为GitHub页面制作 pushState 有一些尴尬的方法，但我个人不推荐使用它们.

(There are some awkward ways to make pushState for GitHub pages, but I don't personally recommend them. Here's a guide for that)

这篇关于React:在gh页面上使用react-router进行客户端路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！