反应路由器：正确导航到新页面

Question

我有一个页面，其中有两个导航链接作为选项卡。当我尝试打开 ItemView 页面时，URL 链接更改为正确的链接但不显示目标页面，只显示一个空白页面，如果我重新加载页面，则会显示目标页面。导航到唯一页面的问题可能出在哪里？这是我的代码：

return (
<>
    <Router>
        <div css="links">
            <NavLink
                exact
                to={`/tab/${tabId}`}
                className="link"
                activeStyle={activeStyle}
            >
                First tab
            </NavLink>
            <NavLink
                to={`/tab/${tabId}/list`}
                className="link"
                activeStyle={activeStyle}
            >
                Second tab
            </NavLink>
        </div>
        <Switch>
            <Route exact path="/tab/:tabId">
                <div className="container">
                    <p className="title">
                        {title}
                    </p>
                    <div className="items">
                        {items.map(({
                            itemtitle, description, tag, id,
                        }) => (
                            <Link to={`/item/${id}`} key={id}>
                                <div className="item">
                                    <ItemView
                                        itemtitle={itemtitle}
                                        description={description}
                                        price={price}
                                        tag={tag}
                                    />
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </Route>
            <Route exact path="/tab/:tabId/list">
                <div className="container">
                    <HandHistoryTab
                        id={user.id}
                        titleName={titleName}
                    />
                </div>
            </Route>
        </Switch>
    </Router>
</>);