web-dev-qa-db-de.com

Verschachtelungsrouten im Reakt-Router v4

Ich habe den Reakt-Router in meiner Anwendung auf Version 4 aktualisiert. Aber jetzt bekomme ich den Fehler

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

Was ist los mit dieser Route?

import {
    Switch,
    BrowserRouter as Router,
    Route, IndexRoute, Redirect,
    browserHistory
} from 'react-router-dom'   

render((
    <Router history={ browserHistory }>
        <Switch>
            <Route path='/' component={ Main }>
                <IndexRoute component={ Search } />
                <Route path='cars/:id' component={ Cars } />
                <Route path='vegetables/:id' component={ Vegetables } />
            </Route>
            <Redirect from='*' to='/' />
        </Switch>
    </Router>
), document.getElementById('main'))
reactjsreact-routerurl-routingreact-router-v4
5
user3142695

IndexRoute und browserHistory sind in der neuesten Version nicht verfügbar. Routen akzeptieren keine untergeordneten Routen mit v4. Stattdessen können Sie Routen in der Komponente "Itself" angeben

import {
    Switch,
    BrowserRouter as Router,
    Route,  Redirect
} from 'react-router-dom'   

render((
    <Router>
        <Switch>
            <Route exact path='/' component={ Main }/>

            <Redirect from='*' to='/' />
        </Switch>
    </Router>
), document.getElementById('main'))

Dann in der Hauptkomponente

render() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route exact path="/" component={ Search } />
           <Route path={`${match.path}cars/:id`} component={ Cars } />
         </div>
    )

}

Ähnlich in der Fahrzeugkomponente 

du wirst haben

render() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route path={`${match.path}/vegetables/:id`} component={ Vegetables } />
        </div>
    )

}
9
Shubham Khatri

Geschachtelte Routen sind ab Version Reakt-Router 4.x nicht verfügbar. Hier ist ein grundlegendes Beispiel direkt aus dem reakt-router Dokumentation zum Code für Verschachtelungsrouten-Secnarios in v4.x.

Schauen Sie sich auch diese Frage an Warum kann ich Routenkomponenten nicht in den reakt-Router 4.x verschachteln?

0
Upasana