鍍金池/ 問(wèn)答/HTML5  HTML/ 使用react-router4路由渲染的組件也嵌套路由導(dǎo)致render兩次

使用react-router4路由渲染的組件也嵌套路由導(dǎo)致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>

兩個(gè)NavLink切換點(diǎn)擊會(huì)導(dǎo)致App和my或hot組件更新兩次
點(diǎn)擊已經(jīng)active的Navlink也會(huì)引起父子組件的兩次render

1.是因?yàn)樽咏M件中的Redirect嗎?
2.如果是,我想在保留路由path屬性值的語(yǔ)義化下應(yīng)該怎么修改?
3.怎么阻止路由轉(zhuǎn)跳?

回答
編輯回答
野橘

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

2017年3月18日 21:54