Warum kann ich route Komponenten in react-router 4.x nicht verschachteln?

Question

Wie in der Welt verwendet man verschachtelte Routen in react-router, speziell Version 4.x? Die folgenden funktionierte gut in früheren Versionen ...

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

Upgrade auf 4.x führt die folgende Warnung ...

Warnung: Sie nicht <Strecke> Komponente und < Strecke Kinder verwenden sollten > auf derselben Route; < Route Kinder > wird ignoriert

Was zum Teufel geht hier vor? Ich habe the docs stundenlang abgesucht und kann geschachtelte Routen nicht erfolgreich arbeiten. Wie benutzt man <Route>Komponenten um ihren Router in react-router v4 zu verschachteln? Wie übersetzt sich mein vereinfachtes Beispiel in die v4.x-API-Konformität, um eine Route zu verschachteln?

Answer 1

Vergessen Sie, was Sie über React Router < v4 wissen. Sie verschachteln Routen, indem Sie sie buchstäblich verschachteln <Routes>. Überprüfen Sie this example. Überprüfen Sie speziell die Topics-Komponente. Sie deklarieren Ihre Routen nicht im Voraus, sondern dynamisch, wenn eine Komponente gerendert wird.

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