解決済み: 静的スタイルを使用してルーターに反応する

React Router で静的スタイルを使用することに関連する主な問題は、さまざまなルートとそれに関連するスタイルを追跡するのが難しい場合があることです。 静的スタイルでは、各ルートに独自の CSS ルールのセットが必要であり、すぐに扱いにくく、維持が困難になる可能性があります。 さらに、スタイルが複数のルートで使用されている場合、それらすべてで複製する必要があるため、コードを DRY (Don't Repeat Yourself) に保つことが困難になります。

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. XNUMX 行目は、react-router-dom ライブラリから BrowserRouter、Route、および Link コンポーネントをインポートします。
3. XNUMX 行目は、styled-components ライブラリからスタイル付きコンポーネントをインポートします。
4. XNUMX 行目は、react-router-dom からインポートされた Link コンポーネントを使用して StyledLink コンポーネントを作成し、それを color: palevioletred および font-weight: bold でスタイル設定し、さらにその色を白に変更してテキストを削除するホバー効果を適用しますホバー時の装飾。
5. 4 行目は、内部に XNUMX つの Route コンポーネント (Home 用と About 用) を持つ Router コンポーネントをレンダリングする App コンポーネントを作成します。 また、XNUMX 行目で作成された StyledLink コンポーネントを使用して、XNUMX つのリンク (Home と About) の順序付けられていないリストをレンダリングします。これらは両方とも、スタイル設定のために hr タグで区切られています。
6. 行 8 ～ 11 は、Home および About と呼ばれる 2 つの機能コンポーネントを作成します。これらは、両方の上にある行 5 のそれぞれの Route コンポーネントによって呼び出されたときに、それぞれの名前を持つ hXNUMX タグをレンダリングします (Home は「Home」をレンダリングし、About は「About」をレンダリングします)。 ）。
7. 最後に、12 行目で App コンポーネントをエクスポートし、必要に応じてアプリケーションの他の場所で使用できるようにします。

静的スタイル

React Router の静的スタイルは、コンポーネントに適用されるスタイルであり、コンポーネントの状態や props の変更に関係なく同じままです。 これは、コンポーネントの状態または props に応じて変化する動的スタイルとは対照的です。 静的スタイルを使用すると、アプリケーション全体で一貫したルック アンド フィールを作成できるだけでなく、変更があるたびにコンポーネントを手動で調整することなく、開発者がコンポーネントをすばやくスタイル設定できる簡単な方法を提供できます。

styled-components パッケージ

Styled-components は、開発者が React アプリケーションでコンポーネント レベルのスタイルを作成および管理できるようにする React Router の一般的なパッケージです。 これにより、単一のコンポーネントに限定された CSS コードを簡単に記述できるようになり、保守とデバッグが容易になります。 また、Styled-components を使用すると、複数のコンポーネント間でスタイルを共有しやすくなり、テーマのサポートも提供されます。 さらに、styled-components は React Router の Link コンポーネントで使用できるため、開発者はアプリケーション内でリンクのスタイルを設定できます。

静的スタイルの使用方法

inline style 属性を使用して、React Router で静的スタイルを使用できます。 この属性を使用すると、個別のスタイルシートを必要とせずに、スタイルを要素に直接適用できます。 React Router で静的スタイルを使用するには、スタイル オブジェクトを作成し、それを引数としてコンポーネントのスタイル プロパティに渡す必要があります。 例えば：

const myStyle = {
backgroundColor: '#f2f2f2',
fontSize: '20px',
色: '#000'
};

関連記事：

コメント