web-dev-qa-db-fra.com

React-router ne charge pas le css pour les pages imbriquées lors de l'actualisation

J'essaie de configurer un react-router pour ma première application Web React, elle semble fonctionner, sauf que le fichier css ne se charge pas pour mes pages imbriquées lorsque j'actualise les pages. 

Cependant, cela fonctionne pour un seul niveau, par exemple /dashboard, mais le css ne se charge pas pour /components/timer

Voici à quoi ressemble mon fichier index.jsx

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')
);

Une idée pourquoi?

cssreactjsreact-router
11
Adetiloye Philip Kehinde

J'ai eu ce problème aussi, où mon application ne chargeait pas de feuilles de style, etc. Cependant, j'importais mes actifs directement dans mon point d'entrée index.html.

En remplaçant les liens par des chemins absolus selon cette documentation , mon problème a été résolu.

Pour moi, cela signifiait changer 

<head>
    <link rel="stylesheet" href="./style.css" ></link>
</head>

pour ça:

<head>
    <link rel="stylesheet" href="/style.css" ></link>
</head>

Je ne sais pas si la même chose fonctionnerait pour vos déclarations d'importation, mais cela en vaut la peine.

FYI J'utilise la mise en page du projet de create-react-app.

27
sonarforte

Je l'ai trouvé!

Ajouter l'élément HTML:

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

sur votre page d’index pour définir un scénario de base pour votre URL afin que tous les autres éléments suivent. 

10
Sequential

Votre script ne charge pas votre css à cause des erreurs 404. Votre serveur Web ne redirige pas toutes les demandes /components/* vers un fichier, puis est acheminé vers votre vue par l'intermédiaire de react.

Mais maintenant, en ce qui concerne plus particulièrement la résolution de vos problèmes de CSS: jadis, j’avais eu du mal à importer les fichiers css dans les fichiers jsx, vous n’êtes donc pas seul :) J'ai plutôt choisi d’utiliser SASS ou MOINS pour compiler mes fichiers CSS. dans un fichier bundle.css avec grunt ou gulp. Puis chargez ce bundle.css directement sur mon fichier index.html. Une astuce intéressante à propos de l’utilisation des compilateurs CSS est que chaque fois que vous modifiez un fichier .scss ou .less, votre bundle.css sera mis à jour.

J'espère que je vous ai dirigé dans la bonne direction.

À votre santé,

0
JorgeObregon

Si vous utilisez le workflow create-react-app, placez les actifs dans un dossier public et utilisez la variable spéciale PUBLIC_URL.

Dans index.html, utilisez% PUBLIC_URL%:

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

Dans les fichiers JS/JSX, utilisez 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'} />; }

Approche recommandée :
importez des feuilles de style, des images et des polices à partir de JavaScript en les plaçant avec des fichiers src.

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;

Ajout d'éléments dans un dossier public

Quand utiliser un dossier public

0
ninjaas