React-router가 새로 고침시 중첩 페이지에 CSS를로드하지 않습니다.

첫 번째 React webapp에 react-router을 설정하려고합니다. 페이지를 새로 고칠 때 css가 중첩 페이지에 대해로드되지 않는다는 점만 제외하면 작동하는 것 같습니다. .React-router가 새로 고침시 중첩 페이지에 CSS를로드하지 않습니다.

그러나 그것은 단지 한 단계 예컨대 /dashboard 작동하지만, CSS는 여기 /components/timer

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

어떤 생각을 왜 모습입니다로드되지 않습니다?

출처

2016-11-04 Adetiloye Philip Kehinde

당신은 그 .CSS 파일에 404을 받고 있습니까? 귀하의 웹 서버가 귀하의 index.js에 '/'와'/ components/: name'을 모두 가리키고 있습니까? – JorgeObregon

@ JorgeObregon이 404를 얻으면 http : // localhost : 3000/assets/대신에 http : // localhost : 3000/components/assets/js/jquery.slimscroll.js로 CSS와 스크립트를로드하려고 시도합니다. js/jquery.slimscroll.js' –

@JorgeObregon 어떻게 내 웹 서버를 '/ components/: name'으로 가리 킵니까? –

404 오류로 인해 스크립트에 css가로드되지 않습니다. 귀하의 웹 서버가 모든 /components/* 요청을 색인 파일로 리디렉션하지 않고 반응을 통해보기로 라우팅합니다.

하지만 지금은 CSS 문제를 해결하는 방법에 대해 ... 과거에는 jsx 파일의 CSS 가져 오기에 어려움을 겪었으므로 혼자가 아닙니다. 대신 SASS 또는 덜 사용하도록 선택했습니다. 내 CSS를 bundle.css 파일로 컴파일하거나 꿀꺽 꿀꺽 마십시오. 그런 다음 내 index.html 파일에 직접 bundle.css을로드하십시오. .ssss 또는 .less 파일을 변경할 때마다 CSS 컴파일러 사용에 대한 간단한 트릭은 bundle.css이 업데이트됩니다.

희망 나는 올바른 방향으로 당신을 지적했다.

건배,

출처

2016-11-04 16:04:35 JorgeObregon

Jorge에게 감사하지만 bundle.css를로드해도 웹 서버에서'/ components/*'를 색인 파일로 리디렉션하지 않는 문제가 해결되지 않습니까? –

발견!

는 HTML 요소를 추가

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

당신의 URL 그래서 모든 사람이 벌을 따를에 대한 기본 케이스를 설정하는 색인 페이지로 이동합니다.

출처

2017-03-04 19:12:36 Sequential

내 응용 프로그램이 스타일 시트 등을로드하지 않는이 문제도 발생했습니다. 그러나 자산을 내 index.html 진입 점에 직접 가져 오려고했습니다.

this documentation에 따라 링크를 절대 경로로 바꾸면 문제가 해결되었습니다. 같은 일이 import 문을 위해 일한다면

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

나는 잘 모르겠지만, 그것은해볼 가치가있다 :

나를 위해

이이에

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

을 변경하는 것을 의미.

참고 : create-react-app에서 프로젝트 레이아웃을 사용하고 있습니다.

출처

2017-06-25 03:04:02 sonarforte

만들기 - 반응 - 응용 프로그램 워크 플로를 사용하는 경우 자산을 공용 폴더 아래에두고 특수 변수 PUBLIC_URL을 사용하십시오.

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

내부 JS/JSX 파일 process.env를 사용 : % PUBLIC_URL % index.html을 내부에서

.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'} />; }

권장되는 방법 : 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;

Adding assets to public folder

When to use public folder

출처

2018-02-22 18:49:45 ninjaas

React-router가 새로 고침시 중첩 페이지에 CSS를로드하지 않습니다.

답변

관련 문제