ปัญหาหลักที่เกี่ยวข้องกับการใช้สไตล์คงที่กับ React Router คือการติดตามเส้นทางที่แตกต่างกันและรูปแบบที่เกี่ยวข้องอาจเป็นเรื่องยาก ด้วยรูปแบบคงที่ แต่ละเส้นทางจำเป็นต้องมีชุดกฎ CSS ของตนเอง ซึ่งอาจทำให้เทอะทะได้อย่างรวดเร็วและยากต่อการบำรุงรักษา นอกจากนี้ หากมีการใช้สไตล์ในหลายเส้นทาง จำเป็นต้องทำซ้ำในทุกเส้นทาง ทำให้ยากต่อการเก็บโค้ด DRY (อย่าทำซ้ำด้วยตัวเอง)
import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import styled from 'styled-components'; const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; &:hover { color: white; text-decoration: none; } `; const App = () => ( <Router> <div> <ul> <li><StyledLink to="/">Home</StyledLink></li> <li><StyledLink to="/about">About</StyledLink></li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </div> </Router>) ; const Home = () => ( <div> <h2>Home</h2> </div>) ; const About = () => ( <div> <h2>About</h2> </div>) ; export default App;
1. บรรทัดแรกนำเข้าไลบรารี React
2. บรรทัดที่สองนำเข้าคอมโพเนนต์ BrowserRouter, Route และ Link จากไลบรารี react-router-dom
3. บรรทัดที่สามนำเข้าองค์ประกอบสไตล์จากไลบรารีองค์ประกอบสไตล์
4. บรรทัดที่สี่สร้างคอมโพเนนต์ StyledLink โดยใช้คอมโพเนนต์ลิงก์ที่อิมพอร์ตจาก react-router-dom และจัดสไตล์ด้วยสี: Palevioletred และ font-weight: bold รวมถึงเอฟเฟ็กต์โฮเวอร์ที่เปลี่ยนสีเป็นสีขาวและลบข้อความใดๆ การตกแต่งเมื่อวางเมาส์เหนือ
5. บรรทัดที่ห้าสร้างคอมโพเนนต์ของแอปที่เรนเดอร์คอมโพเนนต์ของเราเตอร์ที่มีคอมโพเนนต์ Route สองอันอยู่ข้างใน (อันหนึ่งสำหรับ Home และอีกอันสำหรับ About) นอกจากนี้ยังแสดงรายการลิงก์สองลิงก์แบบไม่เรียงลำดับ (หน้าแรกและเกี่ยวกับ) โดยใช้คอมโพเนนต์ StyledLink ที่สร้างขึ้นในบรรทัดที่ 4 เหนือลิงก์ทั้งสองคั่นด้วยแท็ก hr เพื่อวัตถุประสงค์ในการจัดรูปแบบ
6. บรรทัดที่ 8 – 11 สร้างองค์ประกอบการทำงานสองส่วนที่เรียกว่า Home และ About ซึ่งแสดงแท็ก h2 โดยมีชื่อตามลำดับอยู่ภายในเมื่อเรียกใช้โดยส่วนประกอบเส้นทางตามลำดับในบรรทัดที่ 5 ด้านบนทั้งสอง (Home แสดง "Home" ในขณะที่ About แสดง "About" ).
7. สุดท้าย บรรทัดที่ 12 จะส่งออกส่วนประกอบของแอปเพื่อให้สามารถนำไปใช้ที่อื่นในแอปพลิเคชันของเราได้หากจำเป็น
สไตล์คงที่
รูปแบบคงที่ใน React Router เป็นรูปแบบที่ใช้กับส่วนประกอบและยังคงเหมือนเดิมโดยไม่คำนึงถึงการเปลี่ยนแปลงใดๆ กับสถานะหรือส่วนประกอบของส่วนประกอบ สิ่งนี้ตรงกันข้ามกับสไตล์ไดนามิก ซึ่งจะเปลี่ยนไปตามสถานะหรืออุปกรณ์ประกอบฉากของคอมโพเนนต์ สไตล์สแตติกสามารถใช้เพื่อสร้างรูปลักษณ์และความรู้สึกที่สอดคล้องกันทั่วทั้งแอปพลิเคชัน รวมถึงมอบวิธีที่ง่ายสำหรับนักพัฒนาในการจัดรูปแบบส่วนประกอบอย่างรวดเร็ว โดยไม่ต้องปรับแต่งด้วยตนเองทุกครั้งที่มีการเปลี่ยนแปลง
แพ็คเกจส่วนประกอบสไตล์
Styled-components เป็นแพ็คเกจยอดนิยมสำหรับ React Router ที่ช่วยให้นักพัฒนาสร้างและจัดการสไตล์ระดับคอมโพเนนต์ในแอปพลิเคชัน React มีวิธีง่ายๆ ในการเขียนโค้ด CSS ที่มีขอบเขตเป็นคอมโพเนนต์เดียว ทำให้ง่ายต่อการบำรุงรักษาและดีบัก คอมโพเนนต์ที่มีสไตล์ยังช่วยให้แชร์สไตล์ระหว่างคอมโพเนนต์ต่างๆ ได้ง่ายขึ้น ตลอดจนให้การสนับสนุนสำหรับการกำหนดองค์ประกอบเหล่านั้น นอกจากนี้ยังสามารถใช้ styled-component กับคอมโพเนนต์ Link ของ React Router ซึ่งช่วยให้นักพัฒนาสามารถจัดรูปแบบลิงก์ภายในแอปพลิเคชันของตนได้
วิธีใช้สไตล์สแตติก
สามารถใช้สไตล์คงที่ใน React Router โดยใช้แอตทริบิวต์สไตล์อินไลน์ แอตทริบิวต์นี้ทำให้คุณสามารถใช้สไตล์กับองค์ประกอบได้โดยตรงโดยไม่ต้องใช้สไตล์ชีตแยกต่างหาก หากต้องการใช้สไตล์สแตติกใน React Router คุณจะต้องสร้างออบเจกต์สไตล์แล้วส่งเป็นอาร์กิวเมนต์ไปยังส่วนสนับสนุนสไตล์ของคอมโพเนนต์ ตัวอย่างเช่น:
const myStyle = {
พื้นหลังสี: '#f2f2f2',
ขนาดตัวอักษร: '20px',
สี: '#000'
};