子路由的内容独占了整个页面，而不是作为父组件的一部分显示，怎么实现，给个案例

当需要在一个React应用中实现子路由内容独占整个页面的情况，通常是在使用SPA（单页应用程序）架构，并且使用了像`react-router-dom`这样的路由库。这种设计常见于深度嵌套的路由场景，或者希望每个路由对应完整独立UI界面的时候。

例如，假设我们有这样一个结构：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 使用Switch包裹所有的Route，防止重复渲染 */}
      <Switch>
        <Route path="/" exact component={Home} /> {/* 主页 */}
        <Route path="/about" component={About} /> {/* 关于页面 */}
        <Route path="/contact" component={Contact} /> {/* 联系页面 */}
        {/* 更深的子路由示例 */}
        <Route path="/users/:userId" component={UserProfile} /> {/* 用户个人资料页面 */}
      </Switch>
    </Router>
  );
}

// Home, About, Contact组件都是各自独立的，它们会各自接收url路径对应的参数并填充整个App组件
function UserProfile({ userId }) {
  // 这里可以访问到用户的ID，并在此组件内部构建完整的用户详情视图
  return (
    <div className="user-profile">
      <h1>User Profile</h1>
      <p>Showing user with ID: {userId}</p>
      {/* 具体的用户信息展示... */}
    </div>
  );
}

export default App;

在这个例子中，当你访问如`/users/123`这样的子路由时，`UserProfile`组件将渲染并独占整个页面，而不会作为`App`组件的内嵌部分。用户可以在任何时候点击导航链接直接进入这个独立的路由。