How can I add React router to the content section in the main layout?

I am developing application using React redux-toolkit. I added the route schema, and then I get the 'wow' error saying the page can't respond when it probably goes into an infinite loop. I have a MainLayout and I want to go to the content part of it by clicking the properties of the layout in the side menu. For example, the page that gives the list of registered cities when I click, the page that gives the names of the countries. I want to give these pages in the content section of the main layout. That's why I need to give you the route diagram that I have prepared. Since I also wrap routes in the app, I think it goes into an infinite loop because it wraps the route part twice, but I don't know how I can solve it. I need help.

function AppRoutes() {
return (
<Routes>
<Route element={<PrivateRoutes><MainLayout/></PrivateRoutes>} path="/">
{/* <Route element={<MainLayout/>} path="/"/> */}
</Route>
<Route element={<Login/>} path="/login"/>
<Route element={<CityList/>} path="/city/list"/>
<Route element={<Register/>} path="/register"/>
<Route element={<ActivateEmail/>} path="/account/activate"/>
<Route element={<NoMatch/>} path="*"/>
</Routes>
)
}
export default AppRoutes
const PrivateRoutes = ({children}) => {
const {userToken } = useSelector((state) => state.auth);
if(!userToken){
return <Navigate to="/login"/>
}else{
return children;
}
}
export default PrivateRoutes;
function App() {
const [locale, setLocale] = useState('tr');
return (
<IntlProvider locale={locale} messages={messages[locale]}>
<AppRoutes/>
</IntlProvider>
);
};
export default App
import { UserOutlined, FileOutlined, SettingOutlined, DownOutlined, LogoutOutlined } from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme, Input, Space, Card, Button, Dropdown, message, Tag, Spin, Row, Col, Form } from "antd";
import { useState, useEffect } from "react";
import { RiLockPasswordLine } from 'react-icons/ri'
import {AiOutlineMenu} from 'react-icons/ai'
import { useDispatch, useSelector } from "react-redux";
import { getUserbyId, signOut } from "../utils/api.service";
import { useNavigate } from 'react-router-dom';
import { getTokenSub } from '../utils/HelperFunctions';
import { getUser, userInfo } from '../types/user';
import { useIntl } from "react-intl";
import AppRouteList from "../routes/AppRouteList";
import FormButton from "../components/FormButton";
import InputDisableText from "../components/InputDisableText";
import AppRoutes, { RouteApp } from "../routes/AppRoutes";
const { Header, Content, Footer, Sider } = Layout;
export function MainLayout() {
const {userToken } = useSelector((state) => state.auth);
const intl = useIntl();
const navigate = useNavigate();
const menuItemClick = (e) => {
switch(e.key){
case "menu_city_list":
navigate("/city/list")
break;
default:
break;
}
}
function getItem(label, key, icon, children) {
return {
key,
icon,
children,
label,
};
}
const items = [
getItem("Faturalar", "sub1", <FileOutlined />, [
getItem("Team 1", "1"),
getItem("Team 2", "2"),
]),
getItem("Sistem Ayarları", "sub2", <SettingOutlined />, [
getItem("Ülkeler", "5"),
getItem(intl.formatMessage({id:"menu_city_list"}),"menu_city_list",<AiOutlineMenu/>),
getItem("Client", "7"),
getItem("Tom", "8"),
getItem("Bill", "9"),
getItem("Alex", "10"),
getItem("Tom", "11"),
// getItem("Bill", "12"),
// getItem("Alex", "13"),
// getItem("Tom", "14"),
getItem("Genel Ayarlar", "15"),
]),
getItem("Hesabım", "sub3", <UserOutlined />, [
getItem("Hesabım", "3"),
getItem("Oturum Kapat", "4"),
]),
];
const handleButtonClick = (e) => {
message.info('Click on left button.');
console.log('click left button', e);
};
const handleMenuClick = (e) => {
message.info('Click on menu item.');
console.log('click', e);
};
const [isLoading, setIsLoading] = useState(false);
const token = localStorage.getItem('userToken');
const sub = getTokenSub(token);
const dispatch = useDispatch();
getUser.Id = sub
useEffect(() => {
dispatch(getUserbyId(getUser)).then((result) => {            
userInfo.id = result.payload.id
userInfo.clientId = result.payload.clientId
userInfo.clientName = result.payload.clientName
userInfo.email = result.payload.email
userInfo.firstName = result.payload.firstName
userInfo.lastName = result.payload.lastName
userInfo.isActive = result.payload.isActive
userInfo.normalizedEmail = result.payload.normalizedEmail
userInfo.userName = result.payload.userName
userInfo.passwordChangeTime = result.payload.passwordChangeTime
});
}, [dispatch, getUser])
useEffect(() => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 1000);
}, []);
const handleLogout = () => {
dispatch(signOut())
};
const itemsDropDown = [
{
label: 'Hesabım',
key: '100',
icon: <UserOutlined />,
},
{
label: 'Şifremi Değiştir',
key: '200',
icon: <RiLockPasswordLine />,
},
{
label: 'Oturum Kapat',
key: '400',
icon: <LogoutOutlined />,
danger: true,
onClick: handleLogout
},
];
const menuProps = {
items: itemsDropDown,
// onClick: handleMenuClick,
};
const [collapsed, setCollapsed] = useState(false);
const {
token: { colorBgContainer },
} = theme.useToken();
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
{isLoading ? (
<Spin size="large" />
) : (
<Layout
style={{
minHeight: "100vh",
}}
>
{console.log("user ınfo", userToken)}
<Sider
collapsible
collapsed={collapsed}
onCollapse={(value) => setCollapsed(value)}
>
<div
style={{
height: 32,
margin: 16,
background: "rgba(255, 255, 255, 0.8)",
}}
>
</div>
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
mode="inline"
items={items}
onClick={menuItemClick}
/>
</Sider>
<Layout className="site-layout">
<Header
style={{
padding: 0,
background: colorBgContainer,
}}
>
</Header>
<Content
style={{
margin: "0 16px",
}}
>
{/* <AppRoutes/> PROBLEM HERE */} 
</div>
</Content>
<Footer
</Footer>
</Layout>
</Layout>
)}
</div>
);
}

When I open the AppRoutes component in the comments line in the content on the main layout page, it enters an endless loop and the browser stops responding and gives an error.

Web Browser

AppRoutes renders MainLayout which when rendering another AppRoutes renders another MainLayout... do you see the problem? This creates a "render loop" by infinite recursion.

I suspect you meant for MainLayout to render an Outlet component for nested routes it may be rendering as a layout route.

import { Outlet } from 'react-router-dom';

...

export function MainLayout() {
  ...

  return (
    <div style={{ .... }}>
      {isLoading ? (
        <Spin size="large" />
      ) : (
        <Layout style={{ .... }}>
          ...
          <Layout className="site-layout">
            <Header style={{ .... }} />
            <Content style={{ .... }}>
              <Outlet /> // <-- for nested route content
            </Content>
            <Footer />
          </Layout>
        </Layout>
      )}
    </div>
  );
}

If you are intending for MainLayout to be a layout route component for all routes then it should wrap all routes. The PrivateRoute component should also be converted to a layout route component so it can wrap all routes that should be protected.

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const { userToken } = useSelector((state) => state.auth);

  return userToken ? <Outlet /> : <Navigate to="/login" replace />;
}

function AppRoutes() {
  return (
    <Routes>
      <Route element={<Login />} path="/login" />
      <Route element={<Register />} path="/register" />
      {/* ... other non-main-layout routes */}
        
      <Route element={<MainLayout />}>
        <Route element={<ActivateEmail />} path="/account/activate" />
        {/* ... other unprotected routes */}

        <Route element={<PrivateRoutes />}>
          <Route element={<CityList />} path="/city/list" />
          {/* ... other protected routes */}
        </Route>

        <Route element={<NoMatch />} path="*" />
        {/* ... other main-layout routes */}
      </Route>
    </Routes>
  )
}