मैं वर्तमान में एक ऐसी साइट पर काम कर रहा हूँ जो अभियानों की पेशकश करती है, और माना जाता है कि इनमें से एक पृष्ठ के अंदर नेस्टेड मार्ग हैं जैसे: /expeditions/antarcticasouthgeorgia

मैं इसके बारे में पूछे गए कुछ अन्य प्रश्नों का अनुसरण कर रहा हूं, और मुझे लगता है कि मेरा कार्यान्वयन काम पर नहीं आ रहा है।

मेरा कोड और संदर्भ नीचे दिखाया गया है। मैं मदद की सराहना करता हूं। शुक्रिया!

ऐप.जेएस

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <ScrollToTop/>
          <NavMenu />
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path="/expeditions" component={Expeditions}/>
            <Route path="/expeditions/antarticasouthgeorgia" component={InnerExpeditions}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

अभियान.जेएस

class Expeditions extends Component {
    render() {

        const OverviewThumbs = (props) => {
            return (
                props.data.map((item, index) => {
                    return (
                        <Col sm={6} lg={4}>
                            <Link to={item.url} className={`overview_thumbs overview_thumbs-${index}`} style={{ backgroundImage: `url(${item.image})` }}>
                                <div className="overview_header">
                                    {item.title}
                                </div>
                            </Link>
                        </Col>
                    )
                })
            )
        }

        const data = [
            {
                title: 'Antartica & South Georgia',
                image: contentImg1,
                url: '/antarticasouthgeorgia'
            },
        ]

        return (
            <div className="page-fade-in expeditions rootPadding">
                <Container fluid className="content overview px-0 pb-0" >
                    <Row className="g-0">
                        <Router basename="/expeditions">
                            <OverviewThumbs data={data} />
                        </Router>
                    </Row>
                </Container>
            </div>
        );
    }
}

export default Expeditions;

संदर्भ

प्रतिक्रिया कैसे प्रदर्शित करने के लिए रूटर प्रतिक्रिया के साथ उप पृष्ठ बनाने के लिए?

प्रतिक्रिया राउटर - उप मार्ग के साथ आंतरिक पृष्ठों को नेविगेट करें

https://www.youtube.com/watch?v=9z-X7UUid9Q

2
jerome 29 अगस्त 2021, 11:41
क्या आप दिखा सकते हैं कि अभी आपका व्यवहार कैसा है?
 – 
Raman Nikitsenka
29 अगस्त 2021, 11:51

1 उत्तर

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

मुद्दा

आप एक से अधिक Router प्रस्तुत कर रहे हैं। आंतरिक राउटर निकटतम रूटिंग संदर्भ है और अपने बच्चों से किसी भी नेविगेशन अनुरोध को संभालेगा। बाहरी राउटर मार्गों को प्रस्तुत कर रहा है। चूंकि आंतरिक राउटर नेविगेशन अनुरोधों को संभालता है, बाहरी राउटर कभी भी विभिन्न मार्गों को प्रस्तुत करना नहीं जानता है।

समाधान

आधिकारिक रूट नेस्टिंग डेमो देखें

Expeditions में नेस्टेड Router को हटा दें, आपको अपने ऐप में नेविगेशन को संभालने के लिए केवल एक राउटर की आवश्यकता है। आप OverviewThumbs घटक को render विधि में घोषित नहीं करना चाहते हैं क्योंकि यह किसी भी समय Expeditions पुन: रेंडर करने के लिए रिमाउंट करेगा। आप उस जेएसएक्स को सुरक्षित रूप से प्रस्तुत रिटर्न में प्रस्तुत कर सकते हैं।

लिंक के लिए अगला मार्ग खंड जोड़ने के लिए वर्तमान match.url का उपयोग करें।

class Expeditions extends Component {
  render() {
    const { url } = this.props.match;
    ...

    return (
      <div className="page-fade-in expeditions rootPadding">
        <Container fluid className="content overview px-0 pb-0" >
          <Row className="g-0">
            {props.data.map((item, index) => (
              <Col key={item.url} sm={6} lg={4}>
                <Link
                  to={`${url}/${item.url}`} // <-- link to nested route
                  className={`overview_thumbs overview_thumbs-${index}`} 
                  style={{ backgroundImage: `url(${item.image})` }}
                >
                  <div className="overview_header">
                    {item.title}
                  </div>
                </Link>
              </Col>
            ))}
          </Row>
        </Container>
      </div>
    );
  }
}

साथ ही, Switch घटक, पथ क्रम और विशिष्टता मामले के साथ। आप घटती विशिष्टता में पथों को क्रमित करना चाहेंगे। यह पथ मिलान को अधिक स्वाभाविक रूप से काम करने की अनुमति देता है और आपको प्रत्येक मार्ग पर exact प्रोप निर्दिष्ट करने की आवश्यकता नहीं होगी।

<Switch>
 <Route path="/expeditions/antarticasouthgeorgia" component={InnerExpeditions}/>
 <Route path="/expeditions" component={Expeditions}/>
 <Route path="/about" component={About}/>
 <Route path="/contact" component={Contact}/>
 <Route path='/' component={Home}/>
1
Drew Reese 29 अगस्त 2021, 12:02