2

我是使用前端和反应 js 的新手。我在我的应用程序中安装了一个模板。index.html 文件包含 css 的所有链接和路径

 index.html
 <html lang="en">
 <head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
 
 { all the css links and scripts goes here}


</body>
</html>

这是我的 app.js 文件。这里我提到了我的上层路线

import logo from './logo.svg';
import './App.css';
import Layout from '../src/Components/Layout/Layout'
import LoginScreen from './Components/Login/LoginScreen'
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
     <div className="App">

      <Router>
          <Route path="/pages" component={Layout}/>
          <Route path="/login" component={LoginScreen} exact />
      </Router>

    </div>
  );
 }

 export default App;

这是我的布局组件，由所有屏幕组件（较低级别的路线）组成

 import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import css_class from "./Layout.module.css";
 import Navbar from '../Navbar/Navbar';
 import TopNavbar from '../TopNavbar/TopNavbar'
 import Home from '../Home/Home'
 import About from '../About/About'
 import OurProject from '../OurProject/OurProject'

 function Layout() {
    return (
      <body>


      <Router>

        
        <TopNavbar/>

        
        <div class="pcoded-main-container">
            <div class="pcoded-wrapper">
                <nav class="pcoded-navbar">
                    <div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a> 
         </div>
                    <div class="pcoded-inner-navbar main-menu">
                        <div class="">
                            <div class="main-menu-header">
                                <img class="img-80 img-radius" style={{height:'7.9em'}} 
                                src="/divylogo.png" alt="User-Profile-Image" />
                            </div>

                            <div class="main-menu-content">
                                <ul>
                                    <li class="more-details">
                                        <a href="user-profile.html"><i class="ti-user"></i>View 
                                         Profile</a>
                                        <a href="#!"><i class="ti-settings"></i>Settings</a>
                                
                                    </li>
                                </ul>
                            </div>
                        </div>

                        
                      <Navbar />
                    </div>
                </nav>
                   
                    <div class="pcoded-inner-content">
                  
                        <div class="main-body">
                            <div class="page-wrapper">

                            
                               
                                <div class="page-body">
                                    

                                    {/* ##################################### */}
                                    <Route path="/" component={Home} exact />
                                    <Route path="/crausal/:id/edit" component={HomeSec2Sub} />
                                    <Route path="/about" component={About} />
                                    <Route path="/ourproject" component={OurProject} />
                                    <Route path="/projects" component={Projects} />
                                    {/* ##################################### */}
                                </div>
                            
                            
                              
                            </div>
                        </div>
                   

                        <div id="styleSelector">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
</div>


<script src="assets/js/jquery.mCustomScrollbar.concat.min.js "></script>


<script src="assets/js/pcoded.min.js"></script>
<script src="assets/js/vertical/vertical-layout.min.js "></script>

<script type="text/javascript" src="assets/js/script.js "></script>
</Router>
</body>

);
}

export default Layout;

但不知何故，我的页面，即布局组件没有得到任何 CSS。在我的 app.js 文件中，如果我将 Layout 组件的路由从 (pages/) 更改为 (/)，那么一切正常。但是，如果我使用 (pages/ as route) 我不会为布局组件中提到的子路由获得任何 CSS。

4

3 回答 3

1

问题

我要说的是，如果我给出这样的路径 ( <Route path="/" component={Layout}/>) 它会起作用。但是，如果我在 ("/") 中使用其他任何东西，例如 ("/pages"、"/subfiles" 等)，那么 css 对它们不起作用。

一旦路径不是“/pages”，则Layout不再安装组件（连同它导入的 css）。它与“/”一起使用的原因是因为“/”是所有路径的路径前缀，并且始终匹配。

是的，我想要这样（“页面/关于”等）。

解决方案

如果您希望“/pages”作为嵌套路径的路径前缀，那么它们实际上需要嵌套。

  1. 从. Switch_ useRouteMatch_ react-router-dom该useRouteMatch钩子允许您访问当前路径，以便您可以在其上构建嵌套路由，并且Switch您只匹配和呈现一个子路由。
  2. 移除嵌套Router组件，您只需要一个Router组件即可提供路由上下文。
  3. 删除body和script标签。每个 HTML 文档只需要一个body标签，并且可以在index.html文件中声明脚本标签。

代码：

import { Route, Switch, useRouteMatch } from "react-router-dom";

function Layout() {
  const { path } = useRouteMatch();

  return (
    <>
      <TopNavbar />

      <div class="pcoded-main-container">
        <div class="pcoded-wrapper">
          ...

          <div class="pcoded-inner-content">
            <div class="main-body">
              <div class="page-wrapper">
                <div class="page-body">
                  <Switch>
                    <Route
                      path={`${path}/crausal/:id/edit`}
                      component={HomeSec2Sub}
                    />
                    <Route path={`${path}/about`} component={About} />
                    <Route path={`${path}/ourproject`} component={OurProject} />
                    <Route path={`${path}/projects`} component={Projects} />
                    <Route path={path} component={Home} />
                  </Switch>
                </div>
              </div>
            </div>

            <div id="styleSelector"></div>
          </div>
        </div>
      </div>
    </>
  );
}

有关更多信息，请参见嵌套示例。react-router-dom

于 2021-05-04T06:15:26.617 回答
1

我也有同样的问题。我的 CSS 文件status code在嵌套路由上给出了 500，react-router-dom但在根路由上工作正常。

读取css文件时出错

我使用以下步骤解决了这个问题：

  1. 从 public/main.css 中删除我的 CSS 文件
  2. 在源根级别添加我的 css 文件 -> src/main.css
  3. 将我的 css 文件导入 index.js ->import './main.css';

PS - 我正在使用 create-react-app

于 2021-07-25T19:34:29.157 回答
0

如果我遇到了同样的问题，解决方案是对 index.html 文件中的所有资产使用绝对路径（以 / 开头）。

由于 index.html 是一个静态文件，因此当您将其作为 /products/productId 加载到路由上时，相对路径指向 /products/style.css，其中找不到文件。

所以在 index.html 中改变这个：

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

为了这：

<link rel="stylesheet" href="/style.css" media="all" />
于 2021-12-22T23:34:42.320 回答