DEV Community

Chantae P.
Chantae P.

Posted on

How I fixed the React Router Issue

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>
Enter fullscreen mode Exit fullscreen mode

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/myProjectThis 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>
Enter fullscreen mode Exit fullscreen mode

Hopefully this will help those who had the same issues I had. Happy Coding!

Top comments (0)