已解决：使用公用文件夹中的样式对路由器进行反应

与使用公用文件夹中的样式的 React Router 相关的主要问题是，很难跟踪样式并确保它们被正确应用。 由于 public 文件夹不是 React 组件树的一部分，因此很难知道何时应用了哪些样式。 此外，如果多个组件使用公用文件夹中的相同样式，则可能很难调试出现的任何问题。

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. 从 'react' 导入 React； // 导入 React 库
2. import { BrowserRouter as Router, Route } from 'react-router-dom'; // 从 react-router-dom 库中导入 BrowserRouter 和 Route 组件
3.从'styled-components'导入{createGlobalStyle}； // 从 styled-components 库中导入 createGlobalStyle 函数
4. 从“./pages/HomePage”导入主页； // 导入主页组件
5. 从'./pages/AboutPage'导入AboutPage； // 导入关于页面组件
6. const GlobalStyle = createGlobalStyle`…`; // 整个应用的全局样式。 这将应用于所有组件。
7. 常量 App = () => (...); // 应用程序的主要组件。 这是定义所有路由的地方。
8. ; // 定义一个精确路径为“/”的路由，用于渲染 HomePage 组件
9. ; // 定义路径为“/about”的路由，用于渲染 AboutPage 组件
10 export default App;// 导出默认应用

使用样式

在 React Router 中可以使用样式来自定义应用程序的外观。 样式可用于创建自定义组件、添加动画等。 样式还可用于创建适应不同屏幕尺寸的响应式布局。 此外，样式可用于为应用程序创建主题，允许用户自定义他们的体验。

使用公共文件夹

React Router中的public文件夹是一个特殊的文件夹，可以用来存放图片、CSS、JavaScript等静态文件。 这些文件直接从公用文件夹提供，无需 React 应用程序处理。 这允许更快的加载时间，并使跨应用程序的多个页面管理资产变得更加容易。 公用文件夹还提供了一种将某些文件排除在 Git 等版本控制系统之外的方法，这有助于维护安全性和隐私性。

如何从 React 中的公共文件夹导入 CSS 文件

在 React Router 中，您可以使用 Link 组件从 public 文件夹中导入 CSS 文件。 Link 组件允许您在 href 属性中指定文件的路径。 例如：

这会将 styles.css 文件从您的公共文件夹导入到您的 React Router 应用程序中。

相关文章：

发表评论