An warware: amsa na'ura mai ba da hanya tsakanin hanyoyin sadarwa ta amfani da salo daga babban fayil ɗin jama'a

Babban matsalar da ke da alaƙa da React Router ta amfani da salo daga babban fayil ɗin jama'a shine cewa yana iya zama da wahala a kula da salon kuma a tabbatar an yi amfani da su daidai. Tun da babban fayil ɗin jama'a baya cikin bishiyar React, yana iya zama da wahala a san irin salon da ake amfani da shi da kuma lokacin. Bugu da ƙari, idan abubuwa da yawa suna amfani da salo iri ɗaya daga babban fayil ɗin jama'a, yana iya zama da wahala a cire duk wata matsala da ta taso.

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. shigo da React daga 'react'; // Ana shigo da ɗakin karatu na React
2. shigo da { BrowserRouter azaman mai ba da hanya tsakanin hanyoyin sadarwa, Hanyar } daga 'react-router-dom'; // Ana shigo da abubuwan BrowserRouter da hanyoyin hanya daga ɗakin karatu na amsa-router-dom
3. shigo da {createGlobalStyle} daga 'salon-bangaren'; // Ana shigo da aikin ƙirƙirarGlobalStyle daga ɗakin karatu mai salo-salo
4. shigo da Shafin Gida daga './pages/HomePage'; // Ana shigo da bangaren Gidan Gida
5. shigo da AboutPage daga './pages/AboutPage'; // Ana shigo da bangaren AboutPage
6. const GlobalStyle = ƙirƙirarGlobalStyle`…`; // Tsarin duniya don duk app. Za a yi amfani da wannan ga duk abubuwan da aka gyara.
7. const App = () => (...); // Babban bangaren app. Wannan shine inda aka ayyana duk hanyoyin.
8. ; // Ƙayyadaddun hanya tare da ainihin hanyar "/" wanda ke haifar da bangaren HomePage
9. ; // Ƙayyade hanya tare da hanyar "/ game da" wanda ke haifar da bangaren AboutPage
10 tsoho App na fitarwa;// Fitar da App azaman tsoho

Amfani da Styles

Ana iya amfani da salo a cikin React Router don keɓance kamanni da yanayin aikace-aikacen. Za a iya amfani da salo don ƙirƙirar abubuwan da suka dace, ƙara rayarwa, da ƙari. Hakanan za'a iya amfani da salo don ƙirƙirar shimfidu masu amsawa waɗanda suka dace da girman allo daban-daban. Bugu da ƙari, ana iya amfani da salo don ƙirƙirar jigogi don aikace-aikacen da ke ba masu amfani damar keɓance ƙwarewar su.

Amfani da Jakar Jama'a

Babban fayil ɗin jama'a a cikin React Router babban fayil ne na musamman wanda za'a iya amfani da shi don adana fayiloli na tsaye kamar hotuna, CSS, da JavaScript. Ana ba da waɗannan fayilolin kai tsaye daga babban fayil ɗin jama'a ba tare da sarrafa su ta aikace-aikacen React ba. Wannan yana ba da damar saurin lodawa kuma yana sauƙaƙa sarrafa kadarori a cikin shafuka masu yawa na aikace-aikacen. Babban fayil ɗin jama'a kuma yana ba da hanya don kiyaye wasu fayiloli daga tsarin sarrafa sigar kamar Git, wanda zai iya taimakawa kiyaye tsaro da sirri.

Ta yaya zan shigo da fayil na CSS daga babban fayil na jama'a a cikin React

A cikin React Router, zaku iya shigo da fayil ɗin CSS daga babban fayil ɗin jama'a ta amfani da ɓangaren mahaɗin. Bangaren haɗin gwiwar yana ba ku damar tantance hanya zuwa fayil ɗin a cikin sifa href. Misali:

Wannan zai shigo da fayil ɗin styles.css daga babban fayil ɗin jama'a zuwa aikace-aikacen React Router.