Menu
I'm trying to setup a react-router for my first React webapp, it seems to be working except that the css doesn't load for my nested pages when I refresh the pages.
However it works for just one level e.g /dashboard but the css won't load for /components/timer
Here is what my index.jsx file looks like
import './assets/plugins/morris/morris.css'; import './assets/css/bootstrap.min.css'; import './assets/css/core.css'; import './assets/css/components.css'; import './assets/css/icons.css'; import './assets/css/pages.css'; import './assets/css/menu.css'; import './assets/css/responsive.css'; render( <Router history={browserHistory}> <Route path="/" component={Dashboard}/> <Route path="/components/:name" component={WidgetComponent}/> <Route path="*" component={Dashboard}/> </Router>, document.getElementById('root') ); Any idea why?
574
Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the current route.
This error is generated because the compiler is only able to import files from the src folder. Here, the CSS file is saved outside the src folder, so the compiler failed to import it. To make this code work, you just have to save the CSS file inside the src folder.
react-router-dom allows us to navigate through different pages on our app with/without refreshing the entire component. By default, BrowserRouter in react-router-dom will not refresh the entire page.
If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!
I had this problem too, where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head> <link rel="stylesheet" href="./style.css" ></link> </head> to this:
<head> <link rel="stylesheet" href="/style.css" ></link> </head> I'm not sure if the same thing would work for your import statements, but it is worth a shot.
FYI I'm using the project layout from create-react-app.
103
Found it!
Add the HTML Element:
<base href="/" /> <!-- for local host --> to your index page to set a base case for your URL so all else will follow suite.
44
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
