React and CSS styling issues

I have a problem that I don't know how to solve... I have my application in React, the styles of the app are passed directly from the public/index.html, this works well.

In my app in src/ I create my components and my styles work but as long as the route is /example but if the route is example/example there it breaks the css and it no longer raises my styles. For the routes I am using React Route 6

That could be happening? This is my index.html

    <!DOCTYPE html>
<html className="no-js">
<head>
    <title>ABY DayCare</title>
    <meta charset="utf-8">

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css" id="color-switcher-link">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/fonts.css">

   <script src="js/vendor/modernizr-2.8.3.min.js"></script>


    <link href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:900,700' rel='stylesheet' type='text/css'>

</head>
<body>
<div className="preloader">
    <div className="preloader_image"></div>
</div>

<div className="modal" tabindex="-1" role="dialog" aria-labelledby="search_modal" id="search_modal">
    <div className="widget widget_search">

    </div>
</div>


<div id="canvas">
<div id="box_wrapper">

<div id="root"></div>

</div>
</div>


        <script src="js/compressed.js"></script>
        <script src="js/main.js"></script>
        <script src="js/jquery-ui.js"></script>

    </body>
</html>

React and CSS styling issues

0 Answers