【问题标题】：CSS not working for nested routing in react jsCSS不适用于反应js中的嵌套路由
【发布时间】：2021-07-26 11:20:25
【问题描述】：

我是使用前端和响应 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。

【问题讨论】：

第一步，移除嵌套的Router组件，你的应用中只需要一个。您能否更详细地说明“嵌套”（not-so-nested，因为它们仍位于根目录）没有得到哪些 CSS？
但是我如何区分登录页面和其他页面。我有一个登录页面，它的 css 和其他页面使用的布局。
在我的 app.js 中用于我的布局组件路径，如果我使用它（ ) 一切正常。但是当我使用它时（）。我的 Layout 中的所有组件都失去了所有的 css
我不确定我是否遵循您的问题...只要路径不是“/pages”，则不再安装 Layout 组件（连同 css它导入了）。您是否想实际上将其他路由嵌套在“/pages”下，例如“/pages/about”等...？
是的，我想要这样（“pages/about”等）。我要说的是，如果我给出这样的路径 () 它可以工作。但是，如果我将其他任何东西与（“/”）一起使用，例如（“/pages”，“/subfiles”等），css 对他们不起作用

标签： reactjs react-router-component

【解决方案1】：

问题

我的意思是，如果我给出这样的路径 (<Route path="/" component={Layout}/>) 它可以工作。但是如果我用 ("/") 使用其他任何东西这样的（“/pages”，“/subfiles”等）css对他们不起作用。

只要路径不是“/pages”，Layout 组件就不再挂载（连同它导入的 css）。它与“/”一起使用的原因是因为“/”是路径前缀适用于所有路径，并且始终匹配。

是的，我想要这样（“pages/about”等）。

解决方案

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

从react-router-dom 导入Switch 和useRouteMatch 挂钩。 useRouteMatch 钩子允许您访问当前路径，以便您可以在其上构建嵌套路由，Switch 允许您仅匹配和呈现一个子路由。
移除嵌套的Router 组件，您只需要一个Router 组件即可提供路由上下文。
删除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 中的nesting example。

【讨论】：

谢谢我现在知道了

【解决方案2】：

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

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

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

P.S - 我正在使用 create-react-app

【讨论】：

【解决方案3】：

如果我遇到了同样的问题，解决方案是对 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" />

【讨论】：