鍍金池/ 問(wèn)答/HTML/ 在react項(xiàng)目中,使用router當(dāng)url變化時(shí),頁(yè)面怎么自動(dòng)渲染

在react項(xiàng)目中,使用router當(dāng)url變化時(shí),頁(yè)面怎么自動(dòng)渲染

<Router history={hashHistory}>

            <Route path="/" getComponent={
                (nextState,callback)=>{
                    require.ensure([],(require)=>{
                        callback(null,require('../slides/kim-001').default);
                    },'HomePage');
                }} />

            <Route path="abbott" getComponent={
                (nextState,callback)=>{
                    require.ensure([],(require)=>{
                        callback(null,require('../slides/abbott').default);
                    },'Abbott');
                }} />

            <Route path="/abbott01" getComponent={
                (nextState,callback)=>{
                    require.ensure([],(require)=>{
                        callback(null,require('../slides/abbott-01').default);
                    },'Abbott01');
                }} />

            {/* 其他重定向到 404 */}
            <Route path="/404" getComponent={
                (nextState,callback)=>{
                    require.ensure([],(require)=>{
                        callback(null,require('./404').default);
                    },'NotFound');
                }} />

            {/* 其他重定向到 404 */}
            <Redirect from='*' to='/404'/>

        </Router>

修改前

圖片描述

url變化了,但是頁(yè)面沒(méi)有變化

圖片描述

項(xiàng)目的地址

如果現(xiàn)在的地址是下圖
圖片描述

http://localhost:6600/#/
然后我在這個(gè)后面加上about后,需要按回車(chē)才能重新渲染,我希望當(dāng)我輸入about后,頁(yè)面能自動(dòng)渲染,而不用按回車(chē)

圖片描述

回答
編輯回答
遺莣

可以把整個(gè)項(xiàng)目方到github嗎?

2017年6月3日 12:31
編輯回答
笨小蛋

路由的匹配方式是從上到下的,只要匹配到一個(gè)路徑就會(huì)直接返回,不再繼續(xù)匹配。abbott01是可以匹配到abbott路徑的,所以不會(huì)向下匹配就直接返回了。

!!'abbott01'.match('abbott')  // => true
2017年9月9日 13:58