Transformez "Route enfants" et "cloneElement" en RouterV4

Question

Je souhaite écrire un routeur dans React Project. Mais Route enfants et cloneElement ne fonctionnent plus à la version 4. Je n'ai pas trouvé de démo ou de tuteur pour enseigner comment passer la valeur dans le routeur dans la version 4 du routeur.

Avez-vous une idée pour résoudre ce problème?

Mon projet Github: https://github.com/LeMueller/musicplayer-by-react/tree/dev

Merci beaucoup.

import React, {Component} from 'react'; 
import Header from './commen/header.js'; 
import Player from './page/player.js'; 
import {MUSIC_LIST} from '../config/musiclist'; 
import MusicListUI from './page/musiclistui.js'; 

import {HashRouter, Switch, Route, Link} from 'react-router-dom'; 


class MusicApp extends Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      musiclist: MUSIC_LIST, 
      currentMusicItem: MUSIC_LIST[0] 
     } 
    } 

    componentDidMount(){ 


     $('#player').jPlayer({ 
      ready:function(){ 
       $(this).jPlayer('setMedia',{ 
        mp3:'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3' 
       }).jPlayer('play'); 
      }, 
      supplied:'mp3', 
      wmode: 'window' 
     }); 


    } 

    componentWillUnMount(){ 

    } 

    render(){ 
     return(
      <div> 
       {React.cloneElement(this.props.children, this.state)}    
      </div> 
     ) 
    } 
} 

export default class Root extends Component{ 
    render(){ 
     return(
      <HashRouter> 
       <div> 
        <Header/> 
        <Route exact path="/" component={MusicApp}> 
         <Route exact path="/" component={Player }></Route> 
         <Route path="/list" component={MusicListUI}></Route> 
        </Route> 
       </div> 

      </HashRouter> 
     ) 
    } 
} 

Answer 1

Si vous cherchez à passer des accessoires à un composant via un composant, vous pouvez utiliser render, par exemple:

<Route exact path="/" render={(props) => <Player example={ props.example } /> }></Route>