अलग-अलग मार्गों के लिए विभिन्न टेम्प्लेट्स के साथ राउटर रियेक्टर v। 5

Question

नमस्ते, मैं इस सवाल को देखा है और यह वही है जो मैं देख रहा हूँ, लेकिन मैं इसे काम करने के लिए नहीं मिल सकता। मास्टर पेज / टेम्प्लेट्स के साथ राउटर V4 राउटर्स को रीऐक्ट करें

मैं 5.2 संस्करण का उपयोग कर रहा हूं

एप्लिकेशन घटक में नेविगेशन शामिल है और दो टेम्पलेट घटकों, 'पब्लिक' और 'प्राइवेट' के साथ दो रास्तों को लपेटता है और जब मैं प्रत्येक लिंक पर क्लिक करता हूं तो मुझे उम्मीद है कि यह पृष्ठ इसे टेम्पलेट द्वारा लपेटा जाएगा लेकिन इसके बजाय केवल पहला लिंक काम करता है और टेम्पलेट दिखाता है। दूसरा लिंक केवल ब्राउज़र एड्रेस बार में url बदलता है और पेज पर केवल पहले टेम्पलेट की सामग्री ही रहती है और दूसरी सामग्री की सामग्री वह नहीं दिखाती है। यदि मैं लिंक के क्रम को हमेशा बदलता हूं तो केवल शीर्ष लिंक को सही टेम्पलेट मिलता है।

यह वह जगह है जहाँ मैं मार्गों और उन्हें लिंक को परिभाषित करता हूं।

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul><li><Link to="/">Home</Link></li>
            <li><Link to="/members">Members</Link></li>
          </ul>
        </div>
        <Switch>
          <Public>
            <Route exact path="/"><Home /></Route>
          </Public>
          <Private>
            <Route path="/members"><Members /></Route>
          </Private>
        </Switch>
      </Router>
    );
  }
}
export default App;

मेरे निजी और सार्वजनिक टेम्प्लेट समान हैं, सिवाय एक शीर्षक के जो एक निजी और दूसरा सार्वजनिक कहते हैं।

class Private extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"><h2>PRIVATE</h2></div>
          <div className="col-md-8">{this.props.children}</div>
          <div className="col-md-2"></div>
        </div>
      </div>
    );
  }
}

export default Private;

मैं थोड़ी देर के लिए कुछ इस तरह की तलाश में था क्योंकि यह एक संभावित साफ समाधान जैसा दिखता है। अगर किसी को पता है कि इसे कैसे ठीक करना है तो मैं वास्तव में इसकी सराहना करूंगा। धन्यवाद

Answer 1

यहाँ Switchघटक क्या करता है:

          React.Children.forEach(this.props.children, child => {
            if (match == null && React.isValidElement(child)) {
              element = child;

              const path = child.props.path || child.props.from;

              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });

जैसा कि आप देखते हैं कि Switchघटक केवल अपने बच्चों के पहले स्तर के बारे में परवाह करता है और path or fromउस नाम के एक प्रस्ताव की तलाश करता है। अगर यह नहीं मिलता है तो यह मानता है कि हर pathमैच होगा। इसलिए यह हमेशा पहले बच्चों को दिखाता है चाहे कोई भी हो।

आपको इस तरह से बच्चों के क्रम को बदलना होगा:

<Switch>
  <Route exact path="/">
    <Public>
      <Home />
    </Public>
  </Route>
  <Route path="/members">
    <Private>
      <Members />
    </Private>
  </Route>
</Switch>