How I fixed the React Router Issue
Chantae P.
Posted on January 27, 2023
In my previous post, I was having problems with my React project not showing when uploaded to Github. Turns out, all I had to do was add the 'basename' attribute to BrowserRouter.
<BrowserRouter basename="project-name">
//Code
</ BrowserRouter>
According to React Router,
The prop may be used to make all routes and links in your app relative to a "base" portion of the URL pathname that they all share.
Let's say for example, your project URL is "https://username.github.io/myProject"
When using 'BrowserRouter', make sure to pay attention to the local host URL after running npm start. If it looks like this, localhost:3000/myProject
This means that the base portion of the URL pathname is 'myProject'.
So in your App.js or index.js file, or wherever you have imported BrowserRouter, make sure to add the basename attribute so your project can work.
<BrowserRouter basename="/myProject" >
//code
</BrowserRouter>
Hopefully this will help those who had the same issues I had. Happy Coding!
Posted on January 27, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.