แก้ไขแล้ว: ตอบสนองเราเตอร์โดยใช้สไตล์จากโฟลเดอร์สาธารณะใน React Router

ปัญหาหลักที่เกี่ยวข้องกับ React Router โดยใช้สไตล์จากโฟลเดอร์สาธารณะคือการติดตามสไตล์และตรวจสอบให้แน่ใจว่าใช้อย่างถูกต้องได้ยาก เนื่องจากโฟลเดอร์สาธารณะไม่ได้เป็นส่วนหนึ่งของโครงสร้างคอมโพเนนต์ของ 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. นำเข้า { BrowserRouter as Router, Route } จาก 'react-router-dom'; // การนำเข้าส่วนประกอบ BrowserRouter และ Route จากไลบรารี react-router-dom
3. นำเข้า { createGlobalStyle } จาก 'styled-components'; // นำเข้าฟังก์ชัน createGlobalStyle จากไลบรารี styled-components
4. นำเข้าโฮมเพจจาก './pages/HomePage'; // การนำเข้าองค์ประกอบโฮมเพจ
5. นำเข้า AboutPage จาก './pages/AboutPage'; // การนำเข้าองค์ประกอบ AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // สไตล์สากลสำหรับทั้งแอป สิ่งนี้จะถูกนำไปใช้กับส่วนประกอบทั้งหมด
7. แอพ const = () => (…); // องค์ประกอบหลักของแอพ นี่คือที่ที่กำหนดเส้นทางทั้งหมด
8. ; // การกำหนดเส้นทางด้วยเส้นทางที่แน่นอนของ “/” ที่แสดงผลองค์ประกอบโฮมเพจ
9. ; // การกำหนดเส้นทางด้วยเส้นทาง "/about" ที่แสดงองค์ประกอบ AboutPage
10 ส่งออกแอปเริ่มต้น // ส่งออกแอปเป็นค่าเริ่มต้น

การใช้สไตล์

สามารถใช้สไตล์ใน React Router เพื่อปรับแต่งรูปลักษณ์ของแอปพลิเคชัน สามารถใช้สไตล์เพื่อสร้างส่วนประกอบแบบกำหนดเอง เพิ่มภาพเคลื่อนไหว และอื่นๆ นอกจากนี้ยังสามารถใช้สไตล์เพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งปรับให้เข้ากับขนาดหน้าจอต่างๆ นอกจากนี้ยังสามารถใช้สไตล์เพื่อสร้างธีมสำหรับแอปพลิเคชันที่อนุญาตให้ผู้ใช้ปรับแต่งประสบการณ์ของตนได้

การใช้โฟลเดอร์สาธารณะ

โฟลเดอร์สาธารณะใน React Router เป็นโฟลเดอร์พิเศษที่สามารถใช้เพื่อจัดเก็บไฟล์แบบคงที่ เช่น รูปภาพ, CSS และ JavaScript ไฟล์เหล่านี้ให้บริการโดยตรงจากโฟลเดอร์สาธารณะโดยไม่ผ่านการประมวลผลโดยแอปพลิเคชัน React ซึ่งช่วยให้โหลดได้เร็วขึ้นและจัดการเนื้อหาในหลายๆ หน้าของแอปพลิเคชันได้ง่ายขึ้น โฟลเดอร์สาธารณะยังมีวิธีการกันไฟล์บางไฟล์ออกจากระบบควบคุมเวอร์ชัน เช่น Git ซึ่งสามารถช่วยรักษาความปลอดภัยและความเป็นส่วนตัวได้

ฉันจะนำเข้าไฟล์ CSS จากโฟลเดอร์สาธารณะใน React ได้อย่างไร

ใน React Router คุณสามารถนำเข้าไฟล์ CSS จากโฟลเดอร์สาธารณะโดยใช้คอมโพเนนต์ลิงก์ คอมโพเนนต์ลิงก์ช่วยให้คุณระบุเส้นทางไปยังไฟล์ในแอตทริบิวต์ href ตัวอย่างเช่น:

สิ่งนี้จะนำเข้าไฟล์ style.css จากโฟลเดอร์สาธารณะของคุณไปยังแอปพลิเคชัน React Router

การใช้สไตล์

การใช้โฟลเดอร์สาธารณะ

ฉันจะนำเข้าไฟล์ CSS จากโฟลเดอร์สาธารณะใน React ได้อย่างไร

แสดงความคิดเห็น ยกเลิกการตอบ