已解決：使用公用文件夾中的樣式對路由器進行反應

與使用公用文件夾中的樣式的 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 應用程序中。

相關文章：

發表評論