基本要点是，react-router通过conditionally rendering选择的UI工作，该UI基于将当前URL路径与一组配置的路由相匹配。
react-router@6中的路由匹配使用路径排名系统来计算给定Routes组件中所有路由路径的得分或排名。Routes组件获取当前的URL路径，并将其与它所管理的最高排名的路由（按路径）进行匹配。一般来说，路由路径越具体，排名越高。排名主要用于打破竞争匹配之间的联系，因为最终只有1可以被匹配和渲染。
可以将Routes组件视为switch语句，其中条件是与当前URL路径匹配的路径。事实上，Routes组件取代了旧的v5 Switch组件。
对于路由配置：

<Routes>
  <Route path="/*" element={<Layout /> } />
  <Route path="/login" element={<LoginPage />} />
</Routes>

当URL为"domain/login"时，最佳匹配显然是"/login"路由。将匹配此路由并渲染LoginPage。Layout组件根本没有渲染，甚至没有挂载到ReactTree中。
另一方面，当URL不是"domain/login"（类似"domain/foo"）时，则"/login"无法匹配，排名第二的路由"/*"是最佳匹配，并呈现Layout组件。LoginPage现在根本没有渲染或挂载。

在react-router中，您不能这样使用它。在第一个块中，您已经声明了，这就是为什么您不能在布局中推另一个。解决方案将是这样的，你可以试试这个：

<Router>
  <Suspense fallback={<PageLoading />}>
    <Routes>
      <Route
        path='/'
       // Layout renders another routes but no /login path
        element={<Layout /> }
      />
      <Route 
        path='/login'
        element={<LoginPage />}
      />
      <Route
        path='/demo1'
        element={<Demo1 /> }
      />
      <Route
        path='/demo2'
        element={<Demo2 /> }
      />
    </Routes>
  </Suspense>
</Router>

在布局上，你可以这样尝试

const Layout = () => {
  return (
    <div>
      <div>main page xxxx</div>
      <div>
          <Link
            to='/demo1'
          />
          <Link
            to='/demo2'
          />
      </div>
    </div>
  )
}