मैं प्रतिक्रिया-राउटर 4.x में रूट घटकों का घोंसला क्यों नहीं कर सकता?

Question

दुनिया में कैसे react-router, विशेष रूप से संस्करण 4.x में नेस्टेड मार्गों का उपयोग करता है? अच्छी तरह से पिछले संस्करणों में काम किया निम्नलिखित ...

<Route path='/stuff' component={Stuff}> 
    <Route path='/stuff/a' component={StuffA} /> 
</Route> 

4.x में अपग्रेड करना निम्न चेतावनी फेंकता है ...

चेतावनी: आप उपयोग नहीं करना चाहिए < मार्ग > घटक और < रूट बच्चों > उसी मार्ग में; < मार्ग बच्चे > को

यहां बिल्ली में क्या चल रहा है? मैंने घंटों के लिए the docs खराब कर दिया है और सफलतापूर्वक नेस्टेड मार्गों को काम नहीं कर सकता है। प्रतिक्रिया-राउटर v4 में अपने राउट्स घोंसले के लिए <Route>घटक का उपयोग कैसे करता है? मेरा सरल उदाहरण कैसे एक मार्ग घोंसला करने के लिए v4.x एपीआई अनुपालन में अनुवाद करता है?

Answer 1

प्रतिक्रिया राउटर < v4 के बारे में आप जो जानते हैं उसे भूल जाओ। आप सचमुच <Routes> घोंसले से मार्गों को घोंसला करते हैं। this example देखें। विशेष रूप से विषय घटक देखें। आप अपने मार्गों को सामने नहीं घोषित करते हैं बल्कि एक घटक प्रस्तुत करते समय गतिशील रूप से घोषित नहीं करते हैं।

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> 

    {/* NESTED ROUTES */} 
    <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