ReactJS url with parameter does not load styles

I'm creating web application for ecommerce using reactJS, I set the Route for product view page along with passing product id and title as URL paramerters, So when the URL is redirecting with parameters reactJs fails to load the Header component

This is my route with Header component which i have tried

     <div>
        <Router basename={'/'}>
          <div className="App">
            <Header />
            <Route path={`/`} exact component={Home}/>

            <Route path={`/pd/:pathParam?/:productPara?`} component={ViewProductContainer} />

          </div>
        </Router>     
    </div>

Here is the component code, Where i'm calling the url by clicking the ahref link

const productList = response.data.map(function(item,i) {

   return <div className="col-sm-2" key={item.product_id} id={item.product_id}>

              <a href={"/pd/"+ item.title +"/"+ item.product_id} target="_blank" className="btn btn-primary">View Details</a>

           </div>


        });

Styles(CSS) are included in Header component working properly with the URL localhost:3000/pd

When the URL comes with aditional paramerter like localhost:3000/pd/productTitle/productID' styles are not applying here

Note : Style sheets specified in index.html in public folder, Components are in SRC/UI folder

1 answer

  • answered 2019-04-15 06:23 Ashok Sri

    I got the solution for my problem

    i have changed this

    <head>
          <link rel="stylesheet" href="./style/menu.css" >
          <link rel="stylesheet" href="./style/productView.css" >
    </head>
    

    to this :

    <head>
          <link rel="stylesheet" href="/style/menu.css" >
          <link rel="stylesheet" href="/style/productView.css" >
    </head>