CSS 不适用于 React js 中的嵌套路由

Question

我不熟悉使用前端和 React 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 文件中，如果我将布局组件的路径从 (pages/) 更改为 (/)，那么一切正常。但是，如果我使用 (pages/ as route) 我在布局组件中提到的子路由没有得到任何 css。

Answer 1

问题

What I am saying is if I give path like this (<Route path="/" component={Layout}/>) It works. But If I use anything else with ("/") this like ("/pages", "/subfiles" etc) The css does not works for them.

只要路径不是“/pages”，Layout 组件就不再安装（连同它导入的 css ).它与“/”一起工作的原因是因为“/”是所有路径的路径前缀并且将始终匹配。

Yes I want it like this ("pages/about" etc).

解决方案

如果您希望“/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。

Answer 2

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

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

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

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

Answer 3

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

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

因此在 index.html 中更改为：

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

为此：

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

CSS 不适用于 React js 中的嵌套路由

CSS not working for nested routing in react js

reactjs

react-router-component

问题

解决方案