Есть идеи, почему пути маршрутов с несколькими символами "/" теряют свой стиль в React Router? - PullRequest
0 голосов
/ 28 мая 2019

Я использую React 16.8.4 и React-Router-Dom 5.0.0 для создания веб-приложения.Я использую скрипты в файле index.html для импорта стилей для компонентов React, а не для импорта отдельных CSS-файлов в каждый компонент (я упоминаю об этом, потому что у меня есть ощущение, что это часть проблемы).Все пути с отдельными параметрами работают отлично, но всякий раз, когда я пытаюсь создать путь с дополнительным необязательным параметром, компоненты теряют свою стилизацию.Ниже приведен класс App с маршрутами.Маршрут "/ classes /: class_id" является проблематичным.

import React, { Fragment, Component } from "react";
import "./App.css";
import SignUp from "./components/general_components/SignUp";
import Login from "./components/general_components/Login";
import ShopClasses from "./components/ShopClassesComponents/ShopClasses";
import Home from "./components/general_components/Home";
import Profile from "./components/profile_components/Profile";
import Toolbar from "./components/Toolbar";
import ClassInfo from "./components/ShopClassesComponents/ClassInfo";
import Footer from "./components/general_components/Footer";
import ContactUs from "./components/general_components/ContactUs";
import { BrowserRouter as Router, Link} from "react-router-dom";
import Route from "react-router-dom/Route"
import About from './components/about_components/About'


class App extends Component {
  state = {
    home: true
  };

  render() {

    return (
      <Router>
        <React.Fragment>
          <Toolbar />
          <Route path="/" exact={true} component={Home}/>
          <Route path="/classes" component={ShopClasses}/>
          <Route path="/classes/:class_id"  exact={true} component={ClassInfo}/>
          <Route path="/about" exact={true} component={About}/>
          <Route path="/signup" exact={true} component={SignUp}/>
          <Route path="/login" exact={true} component={Login}/>
          <Route path="/profile" exact={true} component={Profile}/>
          <Route path="/contact" exact={true} component={ContactUs}/>
          <Footer />
        </React.Fragment>
      </Router>
    )
  }
}
export default App;

Я пытался создать другие маршруты с несколькими параметрами с одинаковым эффектом.Дело не только в том, что визуализируемый компонент теряет свой стиль, но и в том, что безоговорочно отображаемая панель инструментов и нижний колонтитул также теряют свой стиль.Я пытался использовать точные и строгие реквизиты, но ни один не изменил рендеринг.Как я уже говорил выше, я думаю, что это как-то связано с тем, что скрипты не загружаются, но я все равно вижу их в HTML.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...