react 嵌套渲染_使用react-router4路由渲染的组件也嵌套路由导致render两次

class App extends Component {

render() {

console.log('render in App');

return (

<div>

<Switch>

<Route path="/hot" component={hot} />

<Route path="/my" component={my} />

<Redirect to='/hot'/>

</Switch>

<NavLink to='/hot'>hot</NavLink><br/>

<NavLink to='/my'>my</NavLink><br/>

</div>

)

}

}

class hot extends Component {

render() {

console.log('render in hot');

return (

<div className="test2">

hot

<Switch>

<Route path="/hot/film" component={film} />

<Route path="/hot/drama" component={drama} />

<Redirect to='/hot/film'/>

</Switch>

</div>

)

}

}

class my extends Component {

render() {

console.log('render in my');

return (

<div className="test2">

my

<Switch>

<Route path="/my/film" component={film} />

<Route path="/my/drama" component={drama} />

<Redirect to='/my/film'/>

</Switch>

</div>

)

}

}

const film = () => <div>film</div>

const drama = () => <div>drama</div>