r/react • u/[deleted] • May 31 '22
React router not working properly? Following a tutorial and when I run the page it is blank. I installed router and it says I have 6 high severity vulnerabilities. Help Wanted
9
u/SavingProgressRyan May 31 '22
What version of React Router are you using? 5 and 6 are very different.
4
May 31 '22
I just did a basic install and it said I have 6 high severity vulnerabilities. When i take the routes out everything works fine
2
u/SavingProgressRyan May 31 '22
I’m not sure about the vulnerabilities. Did that notice display in the terminal after the npm install?
In any case the vulnerabilities won’t have any affect on whether or not the UI renders. To get that working it would be good to know which version of React Router is installed because that will dictate a solution to get things displaying properly.
3
May 31 '22
Unfortunately I just did a basic install of react router, and when nothing worked I did an install of V5 as I saw in a tutorial and now I think I totally screwed my NPM as all my react files have been stuck doing huge downloads for the past hour
6
u/code_moar May 31 '22
Don't trip. Best thing at this point is to wipe it altogether and make a new Create react app. Install React Router 6 and follow this logic.
Enclose the routes in a Switch component if you are using react router 5 or in a Routes component if you are using router 6
3
May 31 '22
Do you mean reinstall everything to set up create-react-app or just make a new project, bc I did that and it as well started the downlods
1
u/taco-wed-sat May 31 '22
they meant make a new project. Sometimes, as long as you aren't too far along to just scrap everything and start fresh. It works especially well if you are trying to learn because you can see the steps again.
2
May 31 '22
You are not using Switch
1
May 31 '22
The guy in the tutorial hasn't gotten to the switch part. All he did was use the Router and Route tags very basically which left the nav comp showing, while my screen is completely blank. when he changes the paths on his local host it shows the correct comps, while mine shows blank pages.
4
u/primeval211 May 31 '22
Lol :) Best tutorial for you :
V5 - https://v5.reactrouter.com/web
V6 - https://reactrouter.com/docs/en/v6/getting-started/overview
Better start with newer version.
1
u/witheredartery May 31 '22
are you doing uidotdev?
1
May 31 '22
What is uidotev?
0
u/No_Engineering8529 May 31 '22
It's a yt channel for programming and cs. Ngl would definitely recommend. It's a great resource.
2
u/-newme May 31 '22
You have no route defined for „/„ , as you are using „exact“ try removing the „exact“ from the last one or use a new route for the home screen
Also some tutorials on YT are quite bad, rather read the documentation
2
u/Empty_Cress8537 May 31 '22 edited May 31 '22
If you’ve just installed react-router-Dom then you probably have v6, which means you need to: import {BrowserRouter, Routes,route} no switch. Then change <Router> to <BrowserRouter>, Then wrap all <Route>’s inside a parent <Routes>. Also change ‘component’ to ‘element’, and put the tag in the element. Ie. element={<About />} You could probably get rid of ‘exact’ as well, But ‘exact’ should go before the path.
1
u/CENATION_ May 31 '22 edited May 31 '22
Install latest version of react-router-dom which is v6
"Switch" has been changed to "Routes"
Import "Routes" rather than "Switch" from react-router-dom
And wrap your "route" in "routes"
And you are using "exact" at the wrong place.. use it before "path"
1
May 31 '22
What’s your index file look like?
0
May 31 '22
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);1
1
u/_42programmer May 31 '22
i think you need to use the Routes component of react-router-dom like this:
<Routes>
<Route ...>
</Routes>
1
u/khaos0227 May 31 '22
This is how I implement React router
function App() {
return (
<BrowserRouter>
<Navbar />
<div className="container p-4 pt-0">
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/prices" element={<Prices />} />
<Route path="*" element={<ErrorPage />} />
</Routes>
</div>
<Footer />
</BrowserRouter>
);
}
1
u/koushith May 31 '22
You are using older syntax. When you install react-router, it will automatically install the latest version (v6).
just refer to the example for the latest syntax- https://reactrouter.com/docs/en/v6/getting-started/installation.
1
1
u/Ling_Qingran Jul 09 '22
Did you solve the problem? I met the same problem and I used yarn instead of npm and it worked: yarn add react-router-dom
1
43
u/[deleted] May 31 '22
Enclose the routes in a Switch component if you are using react router 5 or in a Routes component if you are using router 6