此问题在此处已有答案：

Children won't render when using a layout in ReactJS（1个答案）
8小时前关门了。
我使用的是react-router v6。当我到达“/authentication”时，“home”只是呈现，但验证，数据库组件也不呈现，即使URL更改。
这里是我的index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {
  Route,
  Routes,
  BrowserRouter
} from "react-router-dom";
import Authentications from './pages/Authentication/Authentications';
import Database from './pages/Database/Database';
import Functions from './pages/Funtctions/Functions';
import Hosting from './pages/Hosting/Hosting';
import MachineLearning from './pages/MachineLearning/MachineLearning';
import Storage from './pages/Storage/Storage';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App/>} >
          <Route index path="authentication" element={<Authentications />} />
          <Route path="database" element={<Database />} />
          <Route path="functions" element={<Functions />} />
          <Route path="hosting" element={<Hosting />} />
          <Route path="storage" element={<Storage />} />
          <Route path="machine-learning" element={<MachineLearning />} />
        </Route>
      </Routes>
    </BrowserRouter>,
  </React.StrictMode>
);

下面是app.js

import Navbar from './components/navbar/Navbar';
import Grid from '@mui/material/Grid';

function App() {
  return (
    <Grid xs={8} item>
      <Navbar>
      </Navbar>
    </Grid>
  );
}

export default App;

这是我的认证. js

import React from 'react'
// import Grid from '@mui/material/Grid';

const Authentications = () => {
    return (
        <div style={{ marginLeft: '500px' }}>
            <h1>Authentication</h1>
        </div>
    )
}

export default Authentications

我想在固定左侧面板的同时更改页面右侧大小的内容