Question

我正在使用React 16.8.4和React-Router-Dom 5.0.0构建一个Web应用程序。我正在使用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中看到它们。

任何建议都将不胜感激，我希望这不是一个愚蠢的问题。

知道为什么在React Router中带有多个“ /”的Route路径会丢失样式吗？

0 个答案: