Resource interpreted as Stylesheet but transferred with MIME type text/html

117

06 июня 2019, 02:10

У меня есть реакт проект

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root"></div>
</body>
</html>

all-results.js:

import React, {Component} from "react";
import Result from "../result/result";
import "./style.css";
class AllResults extends Component {
    render() {
        return (
            <div className="global_result">
                <div className="results">
                    <Result />
                </div>
            </div>
        );
    }
}
export default AllResults;

app.js

import React, {Component} from "react";
import Login from "./login/login";
import Topics from "./topics/topics";
import Task from "./task/task";
import Results from "./results/results";
import AllResults from "./all_results/all-results";
import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
import {createSession} from "../api/session-api";
class App extends Component {
    componentDidMount() {
        let sessionId = sessionStorage.getItem('sessionId');
        if (!sessionId) {
            createSession().then((id) => {
                sessionStorage.setItem('sessionId', id);
            });
        }
    }
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" render={() => <Redirect to="/login"/>}/>
                    <Route path='/login' component={Login}/>
                    <Route path='/topics' component={Topics}/>
                    <Route path='/task' component={Task}/>
                    <Route exact path='/results' component={Results}/>
                    <Route path='/results/all' component={AllResults}/>
                </Switch>
            </BrowserRouter>
        );
    }
}
export default App;

При загрузке страницы не видит css файл в index.html. Я выявил, что проблема состоит в маппинге "/results/all". Если бы я поставил "/all" например, то все бы работало. Он берет относительный путь к файлу. Как решить эту проблему?

Answer 1

В стартовом файле React'a можно подключить стили, а из html документа убрать <link />

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
ReactDOM.render(...);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нарисовать линии на JS (jQuery)

появилась нужда сделать данную вещь, подскажите, с чего начать и как лучше сделать подобное?

134

javascript

скрипт работает только в одном первом табе jQuery

Имеется следующий код :

149

javascript

Почему this.field.sort в консоль сортирует а в DOM нет?

Ребят, подскажите, почему thisfield

133

javascript

Как отключить скрипт для некоторый url?

У меня есть скрипт для плавного опускания по якорю, но мне нужно что бы скрипт срабатывал только для определенной группы ссылок обозначеными...

142