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.
Related
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 am using react and react-router do we have any replacement of window.location.assign or any other window method for redirection in react or react-router? I want to redirect to some other website. Not on the same react website from which I am redirecting.
I found this answer How to emulate window.location with react-router and ES6 classes but it is redirecting to some other page in the react application only so, this is not sufficient for me.
I am using react-router v4+
I think you want to redirect third party URLs
location.assign(<Your URL>);
example:
location.assign("https://google.com")
Have you tried using the history package, after installing history package,
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
history.push('www.abc.com');
history.go(0);
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}>
Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side?
https://reacttraining.com/react-router/
In some examples you need to pass the history, in others not. What to do?
<Router history={browserHistory}>
vs
<Router>
It's really confusing on when to use one or the other, any help appreciated.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router. As far as when you use
<Router history={browserHistory}>
vs
<Router>
In RRv4 you won't need to pass down browserHistory, that was just for previous versions of the router.
If you're still confused, you can check out the details on each package here
react-router-dom is a react-router plus:
<BrowserRouter> which is
<Router history={browserNativeHistoryApiWrapper}/>
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
some Link improvements for browser
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
and with <NavLink> — wrapper that knows if it's "active" or not
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Just use react-router-dom - react-router-dom re-exports all of react-router. The link on GitHub answer (what's the diff between react-router-dom & react-router?).
In v4, react-router exports the core components and functions.
react-router-dom exports DOM-aware components, like <Link> ( which
renders <a>) and (which interacts with the browser's
window.history ).
react-router-dom re-exports all of react-router's exports, so you
only need to import from react-router-dom in your project.
(Source: GitHub)
Found this in the Github.
Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.
Source: https://github.com/remix-run/react-router/tree/main/packages/react-router
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)