แก้ไขแล้ว: ตอบสนองเราเตอร์โดยใช้รูปแบบคงที่

ปัญหาหลักที่เกี่ยวข้องกับการใช้สไตล์คงที่กับ 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'
};