单独的反应路由器和按钮onClick

Question

我是React的新手，并且有一个关于React Router的问题。通常，在应用程序中，页面包含在路由组件中。例如，在一个组件中：

<Router>
   <Link ...>...</Link>
   <Route ... /> //page1
   <Route ... /> //page2
</Router>

这导致一个问题，所有这些页面都被呈现为包含<Router>的元素的子元素。因此，我的问题是，如何将一个组件中的所有组件分离，将另一个组件中的所有溃败组件分离，以便将它们呈现为同一层。

- App.jsx
 - Router.jsx (with Link)
 - Route.jsx (with pages)

我的想法是在App.js中创建一些状态，让这些状态由Router.jsx中的某些onClick事件按钮控制，然后更改Route.js中的路径。有人可以帮我解决这个问题吗？谢谢大家。