I m new to react, having some problems with build and uploading project.
If I upload with out adding react-router-dom it works fine, but when i upload files from build folder after importing react-router-dom, blank page appears
but there are not any errors in console. Files and codes are visible from the source tab from Developer tools.
Note: With out react-router-dom all the html renders in browser. Also I have added /folder-name/static....(for chunks and manifest)
This is the code to import react-router-dom
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
No any error messages in console.
Install both react-router and react-router-dom.
Got my answer on github page, was not aware of basename for BrowserRouter.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md
Related
I'm trying to use BrowserRouter and Router in my ReactJS project at CodeSandbox and there is a dependency error: Could not find dependency: 'react-router-dom' relative to '/src/App.js'
I don't know how to control these dependencies yet. Please Help!
import { BrowserRouter as Router, Route } from 'react-router-dom';
You need to add React-router-dom from Add dependency.
When you are using Codesandbox and you want to use third party package you need to add that third party package as a dependecy of your project which can be done under the Dependencies Section of the left side Explorer for that package to be available in your code so you can import that package
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 understand how BrowserRouter and HashRouter work in React Router v4. I am currently using BrowserRouter so I don't get such ugly URLs. I have seen many examples, most of which are outdated. I would like to know how I can refresh the page on a route without getting a 404 on the production server? Essentially having React re-render the component. I should also mention that I am using create react app and the react-scripts provided to start and build the project. I tried the historyApiFallback thing in webpack and it doesn't seem to do anything.
If you have a simple application and wan't to avoid server side rendering of routes, you can use "React Snap"
https://www.npmjs.com/package/react-snap
Once you configure it, it pre-renders your web app routes into static HTML. I use it for a lot of my react+router apps and I love it.
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}>
I can't find any tutorial showing how to add React Router to an existing create-react-app. All of them show how to do it when you start a fresh create react app. How do I add it to the half finished create-react-app I'm working on?
1.install react-router-dom (v4).
import {Switch,Route,Link} from 'react-router-dom';
import BrowserHistory,
now you can use Switch Route Components to play with routing.