react router實現多級嵌套路由默認跳轉

好久沒記錄博客了，最近換工作了，用的是react庫做項目。熟悉新公司的react一整套框架老費勁了（3年前寫過react，當時還是用class的方法去寫，現在發現從16.8.0加入hooks后，react確實比之前理解起來有難度了）。白天遇到在寫react路由的時候遇到了一個問題，就是二級路由跳轉如何實現一個默認值，下邊我大概畫一下需要實現的效果：

我們左側的導航菜單數據：

[
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '工作空間',
        path: '/workspace', // 這塊實際可以沒有，因為有子菜單的父級菜單點擊不跳轉，這塊寫出只是為了說明結構
        items: [
            {
                name: '小王的工作空間',
                path: '/workspace/xiaowang',
            }，
            {
                name: '小明的工作空間',
                path: '/workspace/xiaoming',
            }，
        ]
    }
]

點擊首頁按鈕實現起來沒啥問題，問題是我們點擊 小王的工作空間 或者 小明的工作空間， 默認跳轉的是 http://127.0.0.1:3000/workspace/xiaowang 或者 http://127.0.0.1:3000/workspace/xiaoming,但是兩個路由是匹配不到的，我們希望點擊這兩個按鈕跳轉到：對應的工作空間下的項目頁面，對應的就是 http://127.0.0.1:3000/workspace/xiaowang/project 或者 http://127.0.0.1:3000/workspace/xiaoming/project，其實此處的項目頁面相當於一個三級嵌套路由，然后在3級嵌套路由里邊去跳轉一個默認值。

所以我們需要有一個類似於重定向的解決方案：如果路由是 http://127.0.0.1:3000/workspace/:user , 我們希望默認重定向到 http://127.0.0.1:3000/workspace/:user/project、

網上查資料：可以通過 react-router-dom 提供 **useRouteMatch ** hook 函數來實現：

let { path, url, params, location } = useRouteMatch();

< Route exact path="/workspace/:workspaceId" render={() => <Redirect to="/workspace/:workspaceId/:tab"}/>
<Route path={`${path}/:tab`}>
    <Topic />
</Route>

下面是我在 codesandbox練習的例子，大家有興趣可以去詳細修改看看效果：

好了，測試成功了，明天去公司試試效果，時間不早了（該休息了zZZ）