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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With