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.
Related
I am importing Routes the following way
import {Routes, Route, BrowserRouter} from 'react-router-dom'
My package JSON is "react-router-dom": "^6.0.2",
I am using Pycharm.
npm list react-router-dom returns -- react-router-dom#6.0.2
Why is this happening? My frontend is blank.
I had the exact same issue of "Cannot Resolve Symbol" for most of the imports in Intellij, when I upgraded to the react-router-dom:6.0.2.
As #DLH stated, the Jetbrains Product was reading the type file for the package from <system directory>/jetbrains/intellij/javascript/typings rather than from the node_modules folder of the project.
As said by Oksana Chumak from Jetbrains:
The IDE downloads typings for some popular libraries to its configuration folder and uses them to enhance code completion.
Solution:
Inside the jetbrains product, press shift two times to open the search everywhere window, search for registry and open the first result.
In the registry, look for typescript.external.type.defintions.packages key and in the value of that field, only remove the react-router-dom field from the values.
Also Go to File -> Invalidate Caches -> select "Clear file system cache and Local History" -> click "Invalidate and Restart"
Now, the jetbrains product will read the type file from node_modules of project, rather than reading it from its internal typings folder. In the future, It will also not try to download and use the intellij react-router-dom typings for other projects.
Credits: Props to #Mir-Ismaili and #unfestive chicken for helping out with the third step.
I just had the same problem in WebStorm. When I did the crtl-click over 'react-router-dom' in the import statement, I saw that it seemed to be confused over which index.ts.d file to pay attention to. One was from the 6.0.2 version installed in my project's node_modules as expected. The other was in C:\Users[me]\AppData\Local\JetBrains\WebStorm2021.2\javascript\typings\react-router-dom\5.3.2\node_modules#types\react-router-dom\index.d.ts.
I just renamed the latter JetBrains file from 5.3.2 figuring that it was now obsolete, and it worked as expected thereafter. It's not the prettiest solution, and I'm only mostly sure that it won't find a way to bite me in the rump later. But at least for now, it works.
We can try removing node_modules and deleting that folder.
Then we can run npm this will reinstall those packages again.
After that, I would then try implement the Router and see if it resolves itself even though it complains that it can't find the symbol.
Something like this should work:
<BrowserRouter>
<Routes>
<Route path='/*' element={ <App /> } />
</Routes>
</BrowserRouter>
I resolved the blank screen, it was because of the version so I had to change the code based on https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md, but I still have a warning "Cannot resolve symbol 'Routes'"I'm using the latest version of Webstrom.
import React from "react";
import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return(
<Router>
<Header />
<main className='py-3'>
<Container>
<Routes>
<Route exact path="/" element={<HomeScreen />}/>
</Routes>
</Container>
</main>
<Footer />
</Router>
);
}
export default App;
You have to install Typescript stubs for the package
You have two options:
Install it with IDE
Put cursor on "react-router-dom" in import statement
hit Alt+Enter
choose Install TypeScript definitions for better type information
Install it with npm
open cmd at your project
npm install #types/react-router-dom
Don't forget to remove IDE library from Preferences | Languages & Frameworks | JavaScript | Libraries , if you used option 1
On macOS, a possible solution is this:
In your app bar, press File -> Invalidate Caches -> select "Clear file system cache and Local History" -> click "Invalidate and Restart"
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 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
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 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)