render()?{
return?(
<div>
????????<Header?/>
????????<Switch>
??????????<Route?exact?path='/'?render={()?=>?{
????????????return?<MusicPlayer?selectedMusic={this.state.selectedMusic}?/>
??????????}}?/>

??????????<Route?path='/list'?render={()?=>?{
????????????return?(
??????????????<MusicList
????????????????musics={this.state.musics}
????????????????curMusic={this.state.selectedMusic}
????????????????onSelectedMusic={(selectedMusic)?=>?{?this.setState({?selectedMusic?})?}}?/>
????????????)
??????????}}?/>
????????</Switch>
??????</div?>
)
}

import 部分：

import { Switch, Route, Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

let history = createBrowserHistory()

root組件return 部分（沒有將root拆分出來為app組件，合在一起的）：

? ?return (

<Router history={history}>

<div>

<Header />

<Switch>

<Route exact path='/' render={() => (

<Player currentMusitItem={this.state.currentMusitItem}></Player>

)}></Route>

<Route exact path='/list' render={() => (

<MusicList musicList={this.state.musicList}></MusicList>

)}></Route>

</Switch>

</div>

</Router>

)

沒有hashHistory? ?引用

import {? HashRouter as Router, Link,Switch} from 'react-router-dom';

<Router>

? ? ? ? ? <Switch>

? ? ? ? ? ? <Route exact path="/" render={(props) => (<Player {...props} currentMusicItem={this.state.currentMusicItem}></Player>)}/>

? ? ? ? ? ? <Route? path="/list" render={(props) => (<PlayerList {...props} currentMusicItem={this.state.currentMusicItem} musiclist={this.state.musiclist}></PlayerList>)} />

? ? ? ? ? </Switch>

? </Router>