发表新帖
发表新帖

React-router not loading css for nested pages on refresh

后端 未结
关注
7 496
甜味超标
甜味超标 2020-12-25 12:07

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 p

相关标签:
7条回答
  • 小蘑菇
    2020-12-25 12:23

    I know its a bit old thread, but ill share my solution here. Its a solution for setup that uses webpack instead create-react-app.

    I found every other solution suggests to change the <link path in the html file. But like in my case webpack handles the asset linking.

    I faced the same problem today. Routes like /some_route works but - /some_route/second_level it doesn't, leaving behind a message in console stating -

    Refused to apply style from 'http://localhost:8080/some_route/some_style.css'.

    I fixed this problem by updating my webpack.config.js file

    output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/',         ////// <-- By adding this line
}

    Hope it helps someone. Thanks!

    0 讨论(0)
  • 有刺的猬
    2020-12-25 12:25

    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.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-25 12:32

    If you are using create-react-app workflow, put the assets under public folder and use the special variable PUBLIC_URL.

    Inside index.html use %PUBLIC_URL%:

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    Inside JS/JSX files use process.env.PUBLIC_URL:

    render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using import for getting asset URLs // as described in “Adding Images and Fonts” above this section. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; }

    Recommended Approach:
    import stylesheets, images, and fonts from JavaScript by placing it along with src files.

    import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
   // Import result is the URL of your image
   return <img src={logo} alt="Logo" />;
}

export default Header;

    Adding assets to public folder

    When to use public folder

    0 讨论(0)
  • 后悔当初
    2020-12-25 12:34

    I added 

    <base href="/" /> <!-- for local host -->

    to my index.html head

    And it is resolved.

    0 讨论(0)
  • 借酒劲吻你
    2020-12-25 12:36

    Your script is not loading your css due to the 404 errors. Your webserver is not redirecting all /components/* request to index file and then routing to your view via react.

    But now, specifically about fixing your css issues... In the past, I've struggled with the css imports in jsx files, so you are not alone :) Instead, I've chosen to use SASS or LESS to compile my css to a bundle.css file with grunt or gulp. Then load that bundle.css directly on my index.html file. One neat trick about using css compilers is every time you change a .scss or .less file, your bundle.css will get updated.

    Hope I pointed you in the right direction.

    Cheers,

    0 讨论(0)
  • 有刺的猬
    2020-12-25 12:49

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题