React Router को Redux एप्लिकेशन में इंस्टॉल करना

पिछले पाठों में हमने Redux के साथ काम करने के लिए मुख्य उपकरण स्थापित किए। अक्सर ऐसा होता है कि एप्लिकेशन को इसके वेब पेजों पर नेविगेट करने के लिए एक रूटर की आवश्यकता होती है और हमारा एप्लिकेशन इसका अपवाद नहीं होगा। इसके लिए हम React Router लाइब्रेरी इंस्टॉल करेंगे।

अपना प्रोजेक्ट खोलें और टर्मिनल में निम्नलिखित कमांड टाइप करें:

terminalnpm install react-router-dom

थोड़ा आगे बढ़ते हुए, मैं कहूंगा कि हमारा Redux एप्लिकेशन परंपरागत रूप से उत्पादों को समर्पित है, जिनकी जानकारी कुछ विक्रेताओं द्वारा पोस्ट की जाती है। इसलिए अब हम मुख्य घटक App को थोड़ा बदल देंगे, और साथ ही एप्लिकेशन में रूटिंग करने की कार्यक्षमता जोड़ेंगे।

शुरुआत के लिए src फोल्डर में जाएं, फिर app में जाएं और यहाँ root.jsx फाइल बनाएं। यह हमारी साइट की जड़ होगी: बाईं ओर हमारे पास मेनू होगा, और दाईं ओर - सामग्री (अभी के लिए हमारे पास यहां केवल एक शीर्षक है):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>This is my first Redux app!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

और घटक App को हम बदल देंगे। शुरुआत के लिए इसकी सामग्री को पूरी तरह से हटा दें। फिर रूटर के लिए दो फ़ंक्शन और हमारे रूट घटक Root को इम्पोर्ट करें:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

इम्पोर्ट के बाद नीचे एक रूटर बनाएं, और पहला रूट लिखें, इसे हमारा Root प्रदर्शित तत्व के रूप में पास करें और, तदनुसार, पथ को '/' पर सेट करें। बाद में App में हम अन्य आवश्यक रूट्स जोड़ेंगे:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

नीचे App फ़ंक्शन का कोड लिखें:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

बस। लॉन्च करें। अगले भाग में हम Redux एप्लिकेशन के लिए घटकों को लागू करेंगे।

अंत में थोड़ी सुंदरता जोड़ते हुए, इसके लिए index.css में स्टाइल्स लिखें:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}