Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style disappears in secondary pages

In my reactjs app I have the Routs as below

function App() {
  return (
    <AuthProvider>
      <Router>
          <MenuBar />
          <Route exact path="/" component={Home} />
          <Route exact path="/Jobs" component={Jobs} />
          <Route exact path="/CreatePost" component={CreatePost} />
          <Route exact path="/CreatePost/NewPage" component={NewPage} />
      </Router>
    </AuthProvider>
  );
}

export default App;

For all pages that are primary like Home and Jobs the style is correct,however if I go to a nested page CreatePost/NewPage or another one FirstPage/SecondPage the style gets removed....

I am working on a bootstrap theme and have included the JS libraries in my index.html file. Please let me know why the following happens

UPDATE

the styles are include in index.html public folder like this:

   <!-- Favicon -->
    <link rel="stylesheet" href="assets/libs/@fortawesome/fontawesome-free/css/all.min.css"/>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" ></div>
    
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/svg-injector/dist/svg-injector.min.js"></script>

  </body>

</html>
like image 820
Data101 Avatar asked Oct 27 '22 15:10

Data101


1 Answers

Use / prefix to the path names so that the files will always load from root.

Add / before assets

Example /assets/libs/@fortawesome/fontawesome-free/css/all.min.css

like image 158
kiranvj Avatar answered Nov 10 '22 00:11

kiranvj