Solved: react router using styles from the public folder

The main problem related to React Router using styles from the public folder is that it can be difficult to keep track of the styles and make sure they are applied correctly. Since the public folder is not part of the React component tree, it can be hard to know which styles are being applied and when. Additionally, if multiple components are using the same style from the public folder, it can be difficult to debug any issues that arise.

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. import React from ‘react’; // Importing the React library
2. import { BrowserRouter as Router, Route } from ‘react-router-dom’; // Importing the BrowserRouter and Route components from the react-router-dom library
3. import { createGlobalStyle } from ‘styled-components’; // Importing the createGlobalStyle function from the styled-components library
4. import HomePage from ‘./pages/HomePage’; // Importing the HomePage component
5. import AboutPage from ‘./pages/AboutPage’; // Importing the AboutPage component
6. const GlobalStyle = createGlobalStyle`…`; // Global styles for the entire app. This will be applied to all components.
7. const App = () => (…); // The main component of the app. This is where all routes are defined.
8. ; // Defining a route with an exact path of “/” that renders the HomePage component
9. ; // Defining a route with a path of “/about” that renders the AboutPage component
10 export default App;// Exporting App as default

Using Styles

Styles can be used in React Router to customize the look and feel of the application. Styles can be used to create custom components, add animations, and more. Styles can also be used to create responsive layouts that adapt to different screen sizes. Additionally, styles can be used to create themes for the application that allow users to customize their experience.

Using the Public Folder

The public folder in React Router is a special folder that can be used to store static files such as images, CSS, and JavaScript. These files are served directly from the public folder without being processed by the React application. This allows for faster loading times and makes it easier to manage assets across multiple pages of an application. The public folder also provides a way to keep certain files out of version control systems like Git, which can help maintain security and privacy.

How do I import a CSS file from public folder in React

In React Router, you can import a CSS file from the public folder by using the Link component. The Link component allows you to specify a path to the file in the href attribute. For example:

This will import the styles.css file from your public folder into your React Router application.