web-dev-qa-db-fra.com

Routes d'imbrication dans react-router v4

J'ai mis à niveau le routeur de réaction à la version 4 dans mon application. Mais maintenant je reçois l'erreur

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

Quel est le problème avec ce routage?

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 et browserHistory ne sont pas disponibles dans la dernière version, et Routes n'acceptent pas les enfants Routes avec v4. Vous pouvez plutôt spécifier des routes dans le composant lui-même.

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'))

Puis dans la composante principale

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

}

De même dans le composant voitures

tu vas avoir

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

}
9
Shubham Khatri

Les routes imbriquées ne sont pas disponibles à partir de la version react-router 4.x. Voici un exemple de base directement à partir de react-router documentation sur la manière de coder pour une imbrication de route secondaire dans la version 4.x.

Consultez également cette question Pourquoi ne puis-je pas imbriquer les composants Route dans react-router 4.x?

0
Upasana