react app, assets path change

Jose Robles — Sun, 12 Dec 2021 19:23:40 +0000

Hello, Im helping a friend to solve an issue a previous developer left, but Im new on React, so I don't know how to solve this issue:

He was integrating a html template he bought with React for his store site (he sells courses). The problem is when we click and open a detail of tutor or a detail of a course, the inner Source structure change, making the app lost the path to the '/assets' folder, making that all the pages to lost the styling.

for most of the pages this is the structure, and works fine, for example the checkout page:

but when I enter on a detail, the structure changes:

As you can see, on the detail, a 'tutorDetail' folder is created and inside is the 'localhost:3000/tutorDetail/assets' folder with the css and js, while the original 'localhost:3000/asset' folder is now empty, after that when I go to any other page, all are a white mess of words and images.

The site was builded on a component called 'Home' and is build like this:

return ( <Fragment> <Header /> <div className="sg-page-content"> <div className="sg-section"> <div className="section-content sg-filter-content list-view-tab section-padding"> <div className="container"> <Content /> </div> </div> </div> </div> <Footer /> </Fragment> )

and in the 'Content' component is where all the pages are render:

return ( <Router> <Switch> <Route path="/courses" component={Courses}/> <Route path="/school" component={Schools}/> <Route path="/tutordetail/:tutor" component={TutorDetail}/> <Route path="/blog" component={Blog}/> <Route path="/coursedetails/:course" component={CourseDetail} /> <Route path="/schooldetails/:school" component={SchoolDetail} /> <Route path="/blogdetail/:idPost" component={BlogDetail}/> <Route path="/login" component={Login}/> <Route path="/register" component={Registro}/> <Route path="/cart" component={Cart}/> <Route path="/checkout" component={Checkout}/> <Route path="/" component={Index}/> </Switch> </Router> )

I also noticed the next:

I tried to 'fix' this editing the HTML manually with the developers tool changing the inner path to the css and js for example:

from

<link rel="stylesheet" href="./assets/css/main.css">

<link rel="stylesheet" href="../assets/css/main.css">

and this fix the looks, but I don't know how to solve this from React to tell all the pages to use the same path to '/assets'

can you guide me on how to solve this?

DEV Community: Jose Robles

react app, assets path change