带有反应路由器 5 的嵌套路由

Question

我想切换嵌套的子元素。这是我的代码：

index.js：

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
);

App.js：

<Switch>
    <Route exact path="/component" component={ Component }/>
    <Route exact path="/component/test" component={ Test }/>
    <Route exact path="/component/test/ui" component={ Ui }/>
</Switch>

Ui.js：

import {BrowserRouter as Router} from "react-router-dom";

<Router>
    <Navbar>
        <Link to='/component/test/ui/page'>
            Page
    </Link>
        <Link to='/component/test/ui/element' >
            Element
    </Link>
    </Navbar>
    <Switch>
        <Route
            exact path='/component/test/ui/page'
            component={Page}
        />
        <Route
            exact path='/component/test/ui/element'
            component={Element}
        />
    </Switch>
</Router>

现在在 Ui 组件中我想切换这个子元素。 当我单击页面或元素链接时，此代码有效，但在页面刷新或在地址栏上搜索时无效。 注意：我不想在 Ui 中导入 App.js 组件。你也可以建议我使用 Redux。