ரியாக்டைப் பயன்படுத்தி மடிக்கக்கூடிய வழிசெலுத்தல் மெனுவை எவ்வாறு உருவாக்குவது

பக்கப்பட்டி வழிசெலுத்தல் மெனு பொதுவாக இணைப்புகளின் செங்குத்து பட்டியலைக் கொண்டுள்ளது. React-router-dom ஐப் பயன்படுத்தி React இல் இணைப்புகளின் தொகுப்பை உருவாக்கலாம்.

பொருள் UI ஐகான்களைக் கொண்ட இணைப்புகளுடன் எதிர்வினை பக்க வழிசெலுத்தல் மெனுவை உருவாக்க இந்தப் படிகளைப் பின்பற்றவும். நீங்கள் கிளிக் செய்யும் போது இணைப்புகள் வெவ்வேறு பக்கங்களை வழங்கும்.

---

---

எதிர்வினை பயன்பாட்டை உருவாக்குதல்

உங்களிடம் ஏற்கனவே ஒரு இருந்தால் எதிர்வினை திட்டம் , தயங்காமல் அடுத்த படிக்குச் செல்லுங்கள்.

அன்றைய வீடியோவை உருவாக்கவும்

விரைவாக ரியாக்ட் மூலம் எழுந்து இயங்க, create-react-app கட்டளையைப் பயன்படுத்தலாம். இது உங்களுக்கான அனைத்து சார்புகளையும் உள்ளமைவையும் நிறுவுகிறது.

react-sidenav எனப்படும் ரியாக்ட் திட்டத்தை உருவாக்க பின்வரும் கட்டளையை இயக்கவும்.

npx create-react-app react-sidenav 

நீங்கள் தொடங்குவதற்கு இது சில கோப்புகளுடன் ரியாக்ட்-சிடெனாவ் கோப்புறையை உருவாக்கும். இந்தக் கோப்புறையைச் சிறிது சுத்தம் செய்ய, src கோப்புறைக்குச் சென்று, App.js இன் உள்ளடக்கங்களை மாற்றவும்:

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

வழிசெலுத்தல் கூறுகளை உருவாக்குதல்

நீங்கள் உருவாக்கும் வழிசெலுத்தல் கூறு இப்படி இருக்கும்:

---

---

இது மிகவும் எளிமையானது, ஆனால் நீங்கள் முடித்தவுடன், உங்கள் தேவைகளுக்கு ஏற்ப அதை மாற்றியமைக்க முடியும். மேலே உள்ள இரட்டை அம்புக்குறி ஐகானைப் பயன்படுத்தி வழிசெலுத்தல் கூறுகளைச் சுருக்கலாம்:

சுருக்கப்படாத காட்சியை உருவாக்குவதன் மூலம் தொடங்கவும். அம்புக்குறி ஐகானைத் தவிர, பக்கப்பட்டியில் உருப்படிகளின் பட்டியல் உள்ளது. இந்த உருப்படிகள் ஒவ்வொன்றிலும் ஒரு ஐகான் மற்றும் சில உரைகள் உள்ளன. ஒவ்வொன்றிற்கும் ஒரு உறுப்பை மீண்டும் மீண்டும் உருவாக்குவதற்குப் பதிலாக, ஒவ்வொரு பொருளுக்கும் தரவை ஒரு வரிசையில் சேமித்து, அதன் மீது வரைபட செயல்பாட்டைப் பயன்படுத்தி மீண்டும் மீண்டும் செய்யலாம்.

---

---

நிரூபிக்க, lib எனப்படும் புதிய கோப்புறையை உருவாக்கி, navData.js என்ற புதிய கோப்பைச் சேர்க்கவும்.

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
] 

மேலே பயன்படுத்தப்பட்ட ஐகான்கள் மெட்டீரியல் UI நூலகத்திலிருந்து வந்தவை, எனவே இந்த கட்டளையைப் பயன்படுத்தி முதலில் அதை நிறுவவும்:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material 

அடுத்து, ஒரு கோப்புறையை உருவாக்கவும் கூறுகள் என்ற புதிய கூறுகளைச் சேர்க்கவும் Sidenav.js .

இந்தக் கோப்பில், ../lib இலிருந்து navData ஐ இறக்குமதி செய்து, அதற்கான எலும்புக்கூட்டை உருவாக்கவும் சிடெனவ் செயல்பாடு:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
} 

இணைப்புகளை உருவாக்க, இந்த கூறுகளில் உள்ள div உறுப்பை இதற்கு மாற்றவும்:

<div> 
    <button className={styles.menuBtn}> 
        <KeyboardDoubleArrowLeftIcon /> 
    </button> 
    {navData.map(item =>{ 
        return <div key={item.id} className={styles.sideitem}> 
	                {item.icon} 
	                <span className={styles.linkText}>{item.text}</span> 
		       </div> 
        })} 
 </div>

வரைபடச் செயல்பாட்டின் ஒவ்வொரு மறு செய்கைக்கும் ஐகான் மற்றும் இணைப்பு உரையைக் கொண்ட வழிசெலுத்தல் இணைப்பை இந்தக் கூறு உருவாக்குகிறது.

பொத்தான் உறுப்பு மெட்டீரியல் UI நூலகத்திலிருந்து இடது அம்புக்குறி ஐகானை வைத்திருக்கிறது. இந்த குறியீட்டைப் பயன்படுத்தி கூறுகளின் மேல் அதை இறக்குமதி செய்யவும்.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; 

வகுப்புப் பெயர்கள் ஒரு பாணிப் பொருளைக் குறிப்பிடுவதையும் நீங்கள் கவனித்திருக்கலாம். ஏனெனில் இந்த பயிற்சி CSS தொகுதிகளைப் பயன்படுத்துகிறது. CSS தொகுதிகள் ரியாக்டில் உள்நாட்டில் நோக்கப்பட்ட பாணிகளை உருவாக்க உங்களை அனுமதிக்கின்றன . இந்தத் திட்டத்தைத் தொடங்க நீங்கள் create-react-app ஐப் பயன்படுத்தினால், நீங்கள் எதையும் நிறுவவோ கட்டமைக்கவோ தேவையில்லை.

கூறுகள் கோப்புறையில், எனப்படும் புதிய கோப்பை உருவாக்கவும் sidenav.module.css மற்றும் பின்வருவனவற்றைச் சேர்க்கவும்:

.sidenav { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 20px; 
}

ரியாக்ட் ரூட்டரை அமைத்தல்

வரைபடச் செயல்பாட்டின் மூலம் வழங்கப்படும் div கூறுகள் இணைப்புகளாக இருக்க வேண்டும். Reactல், react-router-dom ஐப் பயன்படுத்தி இணைப்புகள் மற்றும் வழிகளை உருவாக்கலாம்.

முனையத்தில், npm வழியாக react-router-dom ஐ நிறுவவும்.

பள்ளியில் தடுக்கப்பட்ட வலைத்தளங்களை எவ்வாறு கடந்து செல்வது

npm install react-router-dom@latest 

இந்த கட்டளை react-router-dom இன் சமீபத்திய பதிப்பை நிறுவுகிறது.

Index.js இல், பயன்பாட்டு கூறுகளை ரூட்டருடன் மடிக்கவும்.

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
); 

அடுத்து, App.js இல், உங்கள் வழிகளைச் சேர்க்கவும்.

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App; 

இந்த ஸ்டைல்களுடன் App.css ஐ மாற்றவும்.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
} 

அனுப்பப்பட்ட URL ஐப் பொறுத்து ஒவ்வொரு வழியும் வெவ்வேறு பக்கத்தை வழங்கும் பாதை முட்டுகள் . பக்கங்கள் எனப்படும் புதிய கோப்புறையை உருவாக்கி நான்கு கூறுகளைச் சேர்க்கவும் - முகப்பு, ஆய்வு, புள்ளியியல் மற்றும் அமைப்புகள் பக்கம். இங்கே ஒரு உதாரணம்:

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
} 

நீங்கள் /ஹோம் பாதையைப் பார்வையிட்டால், நீங்கள் 'வீடு' என்பதைக் காண வேண்டும்.

வழிசெலுத்தல் இணைப்புகளை மாற்றுதல்

பக்கப்பட்டியில் உள்ள இணைப்புகளை நீங்கள் கிளிக் செய்யும் போது பொருந்தக்கூடிய பக்கத்திற்கு வழிவகுக்கும். Sidenav.js இல், div உறுப்புக்குப் பதிலாக ரியாக்ட்-ரவுட்டர்-டோமில் இருந்து NavLink கூறுகளைப் பயன்படுத்த வரைபட செயல்பாட்டை மாற்றவும்.

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})} 

கோப்பின் மேலே உள்ள NavLink ஐ இறக்குமதி செய்ய நினைவில் கொள்ளுங்கள்.

import { NavLink } from "react-router-dom"; 

NavLink இணைப்புக்கான URL பாதையை to prop மூலம் பெறுகிறது.

இது வரை, வழிசெலுத்தல் பட்டி திறந்திருக்கும். அதை மடிக்கக்கூடியதாக மாற்ற, பயனர் அம்புக்குறி பொத்தானைக் கிளிக் செய்யும் போது CSS வகுப்பை மாற்றுவதன் மூலம் அதன் அகலத்தை மாற்றலாம். அதைத் திறக்க நீங்கள் CSS வகுப்பை மீண்டும் மாற்றலாம்.

இந்த மாற்று செயல்பாட்டை அடைய, பக்கப்பட்டி எப்போது திறந்து மூடப்படும் என்பதை நீங்கள் தெரிந்து கொள்ள வேண்டும்.

இதற்கு, யூஸ்ஸ்டேட் ஹூக்கைப் பயன்படுத்தவும். இது எதிர்வினை கொக்கி ஒரு செயல்பாட்டுக் கூறுகளில் நிலையைச் சேர்க்க மற்றும் கண்காணிக்க உங்களை அனுமதிக்கிறது.

sideNav.js இல், திறந்த நிலைக்கான ஹூக்கை உருவாக்கவும்.

const [open, setopen] = useState(true) 

திறந்த நிலையை உண்மையாகத் தொடங்குங்கள், எனவே நீங்கள் பயன்பாட்டைத் தொடங்கும் போது பக்கப்பட்டி எப்போதும் திறந்திருக்கும்.

அடுத்து, இந்த நிலையை மாற்றும் செயல்பாட்டை உருவாக்கவும்.

const toggleOpen = () => { 
    setopen(!open) 
} 

இது போன்ற டைனமிக் CSS வகுப்புகளை உருவாக்க நீங்கள் இப்போது திறந்த மதிப்பைப் பயன்படுத்தலாம்:

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</span> 
               </NavLink> 
     })} 
</div> 

பயன்படுத்தப்படும் CSS வகுப்புப் பெயர்கள் திறந்த நிலையால் தீர்மானிக்கப்படும். எடுத்துக்காட்டாக, திறந்தது உண்மையாக இருந்தால், வெளிப்புற DIV உறுப்புக்கு ஒரு sidenav வர்க்கப் பெயர் இருக்கும். இல்லையெனில், வகுப்பு பக்கவாட்டாக இருக்கும்.

நீங்கள் பக்கப்பட்டியை மூடும்போது வலது அம்புக்குறி ஐகானாக மாறும் ஐகானுக்கும் இது ஒன்றுதான்.

அதை இறக்குமதி செய்ய நினைவில் கொள்ளுங்கள்.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; 

பக்கப்பட்டி கூறு இப்போது மடிக்கக்கூடியது.

இதிலிருந்து முழுமையான குறியீட்டைப் பெறவும் கிட்ஹப் களஞ்சியம் மற்றும் அதை நீங்களே முயற்சிக்கவும்.

யூஎஸ்பி துவக்கக்கூடிய விண்டோஸ் 7 ஐ உருவாக்குவது எப்படி

ஸ்டைலிங் எதிர்வினை கூறுகள்

மடிக்கக்கூடிய வழிசெலுத்தல் கூறுகளை உருவாக்குவதற்கு எதிர்வினை நேரடியாக உதவுகிறது. ரியாக்ட் வழங்கும் ரியாக்ட்-ரவுட்டர்-டோம் போன்ற சில கருவிகளை ரூட்டிங் கையாளவும் மற்றும் சரிந்த நிலையைக் கண்காணிக்க கொக்கிகள் பயன்படுத்தவும்.

ஸ்டைல் ​​கூறுகளுக்கு CSS தொகுதிக்கூறுகளையும் பயன்படுத்தலாம், இருப்பினும் நீங்கள் செய்ய வேண்டியதில்லை. தனித்தன்மை வாய்ந்த மற்றும் பயன்பாட்டில் இல்லாத பட்சத்தில், தொகுப்புக் கோப்புகளிலிருந்து நீங்கள் அசைக்கக்கூடிய, உள்நாட்டில் நோக்கமுள்ள வகுப்புகளை உருவாக்க அவற்றைப் பயன்படுத்தவும்.