Components rendered using react-router4 routing also nest routes that cause render twice

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>

two NavLink switching clicks will cause App and my or hot components to update twice
clicking on an already active Navlink will also cause two render of parent and child components

1. Is it because of the Redirect in the subcomponents?
2. If so, how should I modify it while preserving the semantics of the route path attribute value?
3. How to prevent routing from switching?