I have an app created with create-react-app boilerplate. I'm also using react router and I try to use browserHistory for clean links (no #). I follow this lesson but I fail to add --history-api-fallback to webpack dev server. I'm not familiar with devpack at all so I dont know where should I put this line so when I reload page I don't get 404 (it happens only when deploying build to server).
I already did eject with npm.
import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
...
</Router>
, document.getElementById('root')
);
EDIT
Reloads work without configuration when I run app locally or when I tried (as suggested) with pushstate-server build. It only doesn't work when I push build to my free web hosting at openshift.com (it was working with browserHash thought)
Related
I did the deploy of my react app using gh-pages and it's showing nothing.
Idk if the reason is that i'm using tailwind so it's not loading the styles (But it don't make sense because i'm importing the css file at index.js)
That's the homepage at the package.json:
"homepage": "http://laurabeatris.github.io/react-new-features",
My Repo at github: https://github.com/LauraBeatris/react-new-features
If you are using react router dom you will have to add the github pages repo name to your routing as well using the basename prop to the BrowserRouter like so :
<BrowserRouter basename={'/react-new-features/'}>
It looks like you haven't included a build of the app in your repository. This is probably because the build/ directory is gitignored by default since it's not source code.
You can change that by removing the /build line from your .gitignore file. This might make your commits a bit strange since running a build will show as code changes, but at least your project should show that way.
Alternatively you can copy the build/ directory after creating a build and rename the folder to something that isn't gitignored so that you can more easily control when a new build should be added to source control.
If you are using React Router then BrowserRouter will not work for now. You can use HashRouter instead.
// import { BrowserRouter as Router } from 'react-router-dom';
import { HashRouter as Router } from 'react-router-dom'
I made react-app and webpack from scratch, and everything works and looks fine in webpack-dev-server. But when I build (bundle) app to file it not showing components from 'Route' path.
Webpack outputting no errors so I don't know how to fix that. This is the project: https://github.com/kamilmoskal/react-movies-library-app
Probably you were trying to open index.html as regular file in the browser. The application should be deployed on some server.
The easiest way to make it work is to serve it on you local machine using i.e. serve:
npm install serve --save
cd doc
serve
Then navigate to http://localhost:5000 in your browser
Ok i figured it out the problem was with < Route exact path='/' ... when path is like this "/", to fix that i changed:
from: import { BrowserRouter, Route, Switch } from 'react-router-dom'
to: import { HashRouter as Router, Route, Switch } from 'react-router-dom'
and in code below from: <BrowserRouter>
...
</BrowserRouter>
to: <Router>
...
</Router>
When i was doing apps throught standard 'npx create-react-app my-app' it was enough to add < BrowserRouter basename={process.env.PUBLIC_URL}> but in this case it didint work. maybe it will help someone.
I have created a new reactjs project using create-react-app and am finding it's not working on IE10 & IE9. I have done a lot of research and it led me to using polyfills, which I have done with many of my other Rails on React app, but I'm finding it not working with this project created via create-react-app.
Here's the error:
SCRIPT5009: 'Map' is undefined
I notice this error is related to ES6's new Map() function.
So, here's what I've done in my code in an attempt to make it work:
import './polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
const app = (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
);
ReactDOM.render(app, document.getElementById('root'));
Polyfill.js:
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/object/assign';
This isn't working. I'm not sure what else to try. I've tried a lot of other polyfill imports as well and continue to get the same error.
Any help would be appreciated!
So, seeing as though create-react-app is what's restricting me from controlling the webpack config, I decided to take a different approach and build a fresh react app using webpack 4. I followed this article, https://dev.to/saigowthamr/how-to-create-a-react-app-from-scratch-using-webpack-4-1909.
This allowed me more control over the webpack config and now the polyfill loaders are working.
Nevertheless, if anyone has an explanation as to why it wasn't working with create-react-app, I think it'd be helpful for the community to know.
Thanks!
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:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing
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)
import { HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>,
document.getElementById('root')
);
I resolve this problem use HashRouter.
I'm trying to make a react project on github pages using [username].github.io. but when I go on the link, it just returns a white screen without any error messages. This also happens when I use a custom domain name.
However, it works when I run it locally and also when I use gh-pages instead of a user repo.
I used https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 to upload all my files into github since I created the repo at the end after I finished, but I tweaked it a little to work without gh-pages.
I also referred to this answer: hosting gh-pages on custom domain, white empty page but it didn't do anything for me.
Does anyone know how to fix this? Thanks!
Change BrowserRouter to HashRouter as follow
Before:
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
After:
import { HashRouter } from "react-router-dom"
ReactDOM.render(
<HashRouter><App /></HashRouter>,
document.getElementById('root')
);
Check if you're getting an error on the console. You might need to switch from BroswerRouter to HashRouter, because gh-pages doesn't work well with the former.
I am a bit late to this discussion, but I ran into this same issue and I found a solution that was not listed here.
Here is the solution I found: https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987
The issue this user was having was related to how GitHub serves your react build from GitHub Pages. GitHub pages serves your react build from a folder names after your repository directory instead of from the root server directory "/". Hopefully this link will help someone else out in the future.
Using react router in my create-react-app i had this same issue. What solved it for me was adding this line to the router.
<Router basename={process.env.PUBLIC_URL}>