How I fixed the React Router Issue

taepal467

Chantae P.

Posted on January 27, 2023

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!

💖 💪 🙅 🚩
taepal467
Chantae P.

Posted on January 27, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Essential React Custom Hooks
javascript Essential React Custom Hooks

February 20, 2024

How I fixed the React Router Issue
javascript How I fixed the React Router Issue

January 27, 2023

Create your eCommerce website with Gatsby
javascript Create your eCommerce website with Gatsby

January 24, 2023