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

Question

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>

两个NavLink切换点击会导致App和my或hot组件更新两次
点击已经active的Navlink也会引起父子组件的两次render

1.是因为子组件中的Redirect吗？
2.如果是，我想在保留路由path属性值的语义化下应该怎么修改？
3.怎么阻止路由转跳？

Answer 1

https://segmentfault.com/a/11... 这篇文章的方法能解决