React: Client-side Routing With React-router On Gh Pages
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
I have tried adding a basename to the BrowserRouter component
<BrowserRouter basename={process.env.PUBLIC_URL}>
Much better explanation of the problem here:
Answer
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.
(There are some awkward ways to make pushState
for GitHub pages, but I don't personally recommend them. Here's a guide for that)
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?