能够更改url但内容（反应路由器）

Question

这是我的设置：

index.js

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

App.js

<Switch>
        {routes.map((route, idx) => {
             return route.component ? (
                 <Route
                    key={idx}
                    path={route.path}
                    exact={route.exact}
                    name={route.name}
                    render={props => (
                    <route.component {...props} />
                    )} />
                     ) : (null);
                     })}

</Switch>

routes.js

const routes = [
    {
        path: '/',
        exact: true,
        component: Parameters,

    },
    {
        path: '/user-information',
        component: UserInformation
    },
]

Sidebar.js

 <Router>
                    <nav>
                        <Link to="/"><Icon type="heat-map" /></Link>
                        <Link to="/user-information"><Icon type="user" /></Link>
                    </nav>
 </Router>

问题是，当我单击侧边栏链接时，URL会变通，但是内容不会改变（但是如果刷新，内容也会改变）

我也看到了其他问题，他们都建议使用import {withRouter} from 'react-router';，但在此示例中，他可以不使用它

有什么主意吗？