解決済み: public フォルダーのスタイルを使用してルーターに反応する

public フォルダーのスタイルを使用する 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」からホームページをインポートします。 // HomePage コンポーネントのインポート
5. 「./pages/AboutPage」から AboutPage をインポートします。 // AboutPage コンポーネントのインポート
6. const GlobalStyle = createGlobalStyle`…`; // アプリ全体のグローバル スタイル。 これはすべてのコンポーネントに適用されます。
7. const アプリ = () => (…); // アプリのメイン コンポーネント。 これは、すべてのルートが定義される場所です。
8. ; // HomePage コンポーネントをレンダリングする「/」の正確なパスでルートを定義する
9. ; // AboutPage コンポーネントをレンダリングする「/about」のパスを持つルートを定義する
10 export default App;// アプリをデフォルトとしてエクスポート

スタイルの使用

React Router でスタイルを使用して、アプリケーションのルック アンド フィールをカスタマイズできます。 スタイルは、カスタム コンポーネントの作成、アニメーションの追加などに使用できます。 スタイルを使用して、さまざまな画面サイズに適応するレスポンシブ レイアウトを作成することもできます。 さらに、スタイルを使用してアプリケーションのテーマを作成し、ユーザーがエクスペリエンスをカスタマイズできるようにすることもできます。

パブリック フォルダーの使用

React Router の public フォルダーは、画像、CSS、JavaScript などの静的ファイルを保存するために使用できる特別なフォルダーです。 これらのファイルは、React アプリケーションによって処理されることなく、パブリック フォルダーから直接提供されます。 これにより、読み込み時間が短縮され、アプリケーションの複数のページにわたるアセットの管理が容易になります。 public フォルダーは、特定のファイルを Git などのバージョン管理システムから除外する方法も提供します。これにより、セキュリティとプライバシーを維持することができます。

React の public フォルダーから CSS ファイルをインポートするにはどうすればよいですか

React Router では、Link コンポーネントを使用して public フォルダーから CSS ファイルをインポートできます。 Link コンポーネントを使用すると、href 属性でファイルへのパスを指定できます。 例えば：

これにより、公開フォルダーから React Router アプリケーションに styles.css ファイルがインポートされます。

関連記事：

コメント