react router 巢狀路由

import react from

"react"
;import
from
"react-router-dom"
;export
default
function()
function
home()
);// console.log(match);
return
/h2>;}
function
about()
function
topics()
/topic1`
}>topic1<
/link>
<
/li>
/topic2`
}>topic2<
/link>
<
/li>
<
/ul>
/:topicid`
}>
>
<
/route>
>
<
/h3>
<
/route>
<
/switch>
<
/div>);
}function
topic()
=useparams()
;return
:<
/h3>
;}

import react from

"react"
;import
from
"react-router-dom"
;const routes =[,
,,]}
]export
default
function()
/>)}
<
/div>
<
/router>)}
function
routewithsubroutes
(route)
exact=
render=
routes=
/>}/
>
}function
home()
function
about()
function
topics()
/>)}
<
/switch>
<
/>);
}function
topic
(props)
= props.match.params;
return
:<
/h3>
;}

useroutematch()會嘗試匹配當前url。

不匹配，則返回null；

匹配，則返回乙個物件。此時，可以在不實際渲染route的情況下，訪問匹配資料。

useroutematch()接受的引數

useroutematch

("/home");
//與當前路徑`/home`是否匹配
同useroutematch()返回的物件的params屬性，是乙個鍵值對。
//path/:topicid

const
=useparams()
;//path/topic1,topicid則等於"topic1"
//path/topic2,topicid則等於"topic2"
vue router 巢狀路由
我們已經學習過了vue模板的另外定義形式，使用。首頁 新聞然後js裡定義路由元件的時候 1.定義 路由 元件。const home const news 實際應用介面，通常由多層巢狀的元件組合而成。比如，我們 首頁 元件中，還巢狀著 登入 和 註冊 元件，那麼url對應就是 home login和 ...
Vue巢狀路由
src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...
react router dom 巢狀路由
入口檔案index.js import react from react import reactdom from react dom import babel polyfill if root null 各個檔案的詳細位置 import react,from react import from r...