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

तो मान लें कि मेरे पास 2 पृष्ठों वाला एक एप्लिकेशन है: उत्पादों की एक सूची और एक उत्पाद दृश्य। उनके बीच स्विच करने का सबसे अच्छा तरीका क्या होगा?

सबसे आसान उपाय एक ऑब्जेक्ट है जिसमें एक राज्यनाम है और एक बूलियन है

constructor() {
  super();

  this.state = {
    productList: true,
    productView: false
  }
}

और फिर अपने रेंडर () फंक्शन में ऐसा कुछ रखें

return() {
  <div className="App">
    // Or you could use an if statement
    { this.state.productList && <ProductList /> }
    { this.state.productView && <ProductView product={this.state.product} /> }
  </div>
}

बहुत सीधा है, है ना? ज़रूर, 2 पेज के आवेदन के लिए जो है।

लेकिन क्या होगा यदि आपके पास 10, 20, 100 पृष्ठों वाला एक बड़ा ऐप है? रेंडर का रिटर्न () हिस्सा गड़बड़ होगा, और हर राज्य की स्थिति को ट्रैक करना पागलपन होगा।

मेरा मानना ​​है कि आपके ऐप को व्यवस्थित करने का एक बेहतर तरीका होना चाहिए। मैंने चारों ओर घूमने की कोशिश की लेकिन मुझे कुछ भी उपयोगी नहीं मिला (if else या सशर्त ऑपरेटरों का उपयोग करने के अलावा)।

26
Alexander Donets 4 अप्रैल 2018, 14:25

3 जवाब

सबसे बढ़िया उत्तर

मेरा सुझाव है कि आप इसे हल करने के लिए react-router चेक करें। परिस्थिति

यह आपको आसानी से इस तरह से कस्टम मार्ग बनाने की अनुमति देता है:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;

नेस्टेड रूटिंग जैसे दस्तावेज़ीकरण और अन्य उदाहरणों के लिए, इस पेज को चेक आउट करें।

18
Ale Gu 25 जुलाई 2020, 12:24

आपने जिस समस्या का उल्लेख किया है, उसे ऐप के भीतर रूटिंग से निपटने के तरीके के रूप में संबोधित किया जा सकता है। उसके लिए कृपया उपलब्ध समाधानों जैसे react-router पर एक नज़र डालें।

एक और तरीका है कि आप इस समस्या से निपटने के लिए अलग-अलग पेज लॉजिक को कंपोनेंट के साथ आगे बढ़ा सकते हैं, फिर प्रॉप्स के रूप में पास किए गए डेटा के आधार पर पेज रेंडर करेंगे। उसके लिए आप सादे, पुराने जावास्क्रिप्ट ऑब्जेक्ट का उपयोग कर सकते हैं।

2
Andrzej Smyk 4 अप्रैल 2018, 11:38

एक और समाधान। फ़ाइलें index.js और product.js निर्देशिका src\pages में हैं। अधिक जानकारी के लिए वीडियो देखें https://www.youtube.com/watch?v=hjR -ZveXBpQ.

फ़ाइल App.js

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import Products from "./pages"
import Product from "./pages/product"

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" ><Products /></Route>
        <Route path="/product"><Product /></Route>
      </Switch>
    </Router>
  );
}

export default App;

फ़ाइल index.js

import React from "react";
import {Link} from "react-router-dom";
const Products = () => {
  return (
    <div>
      <h3>Products</h3>
      <Link to="/product" >Go to product</Link>
    </div>
  );
};
export default Products;

फ़ाइल उत्पाद.जेएस

import React from "react";
const Product = () => {
  return (
    <div>
      <h3>Product !!!!!!</h3>
    </div>
  );
}
export default Product;
4
Uku Lele 7 नवम्बर 2019, 18:36