BrowserRouter is not a <Route> component. All component children of <Routes>must be a<Route>or<React.Fragment>router component already exist in App.js

Question

Creating my own CRM system, encountered a bug in React Router which is related to component rendering error, I guess the problem is that routes cannot be pushed inside components, anyway I don't know how to solve this problem, thanks)
import {AppBar, Box, CssBaseline, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography, ListSubheader, Breadcrumbs, Link, styled} from '@mui/material' import StackedLineChartIcon from '@mui/icons-material/StackedLineChart'; import PeopleOutlineIcon from '@mui/icons-material/PeopleOutline'; import WorkOutlineIcon from '@mui/icons-material/WorkOutline'; import NavigateNextIcon from '@mui/icons-material/NavigateNext'; import HomeIcon from '@mui/icons-material/Home';

import { useState,useMemo, Fragment } from 'react';
import { BrowserRouter as Route, Routes, Router } from "react-router-dom";

import EmployeeDashboard from "../main-module/components/EmployeeDashboard";
import CollapsibleTable from '../main-module/components/ClientsList';
import EmployeeStats from '../main-module/components/EmployeeStats';
import ProfileMenu from '../main-module/components/ProfileMenu';
import EmployeeOptions from '../main-module/components/EmployeeOptions';

const drawerWidth = 240;

const StyledListItemBtn = styled(ListItemButton)(({ theme }) => ({
  borderRadius: "4px"
}));

const WorkPage = () => {
    const [component, setComponent] = useState("call");
    const [selectedIdx, setSelectedIdx] = useState(2);

    const handleItemClick = (idx) => {
        setSelectedIdx(idx);
    };

    const drawer = (
        <Box >
            <Toolbar sx={{ display: "flex", alignItems: "center", justifyContent: "space-around" }}>
                <Typography variant='h5'>office.kr</Typography>
            </Toolbar>
            <Divider />
                <List       
                subheader={
                    <ListSubheader>CRM</ListSubheader>
                }>
                    <ListItem>
                        <StyledListItemBtn 
                            selected={selectedIdx === 0} 
                            onClick={() => {setComponent("stats"); handleItemClick(0)}}
                        >
                            <ListItemIcon>
                                    <StackedLineChartIcon color='secondary'/>    
                            </ListItemIcon>
                            <ListItemText primary="Моя статистика" />
                        </StyledListItemBtn>
                    </ListItem>
                    <ListItem>
                        <StyledListItemBtn 
                            selected={selectedIdx === 1} 
                            onClick={() => {setComponent("clients"); handleItemClick(1)}}
                        >
                            <ListItemIcon>
                                    <PeopleOutlineIcon color='secondary'/>  
                            </ListItemIcon>
                            <ListItemText primary="Мои клиенты"/>
                        </StyledListItemBtn>
                    </ListItem>
                    <ListItem>
                        <StyledListItemBtn 
                            selected={selectedIdx === 2} 
                            onClick={() => {setComponent("call"); handleItemClick(2)}}
                        >
                            <ListItemIcon>
                                    <WorkOutlineIcon color='secondary'/>
                            </ListItemIcon>
                            <ListItemText primary="Обзвон" />
                        </StyledListItemBtn>
                    </ListItem>
                </List>
            <Divider />
            <EmployeeOptions />
        </Box>
    );
    
    const setContent = () => {
        switch (component) {
            case 'call':
                return <Route path="/dashboard" element={<EmployeeDashboard />} />;
            case 'clients':
                return <Route path="/clients" element={<CollapsibleTable />} />;
            case 'stats':
                return <Route path="/stats" element={<EmployeeStats />} />;
            case 'error':
                return <p>Error</p>;
            default:
                throw new Error('Unexpected process state');
        }
    }

    const elements = useMemo(() => {
        return setContent();
        // eslint-disable-next-line
    }, [component])

      const breadcrumbs = [
        <Link underline="hover" 
            key="1" 
            href="/" 
            sx={{ display: 'flex', alignItems: 'center' }}
        >
            <HomeIcon sx={{ mr: 1 }} fontSize="inherit" />
            Главная
        </Link>,
        <Link
            underline="hover"
            key="2"
            href="/"
        >
            CRM
        </Link>,
        <Typography key="3">
            Обзвон
        </Typography>,
    ];

    return (
        <Box sx={{ display: 'flex' }}>
            <CssBaseline />
            <AppBar 
                position="fixed"         
                sx={{
                    width: { sm: `calc(100% - ${drawerWidth}px)` },
                    ml: { sm: `${drawerWidth}px` },
                    backgroundColor: "#161b22",
                    borderBottom: "1px solid #30363d !important"
                }}>
                <Toolbar>
                    <Typography sx={{flexGrow: 1}} variant="h6" color="textSecondary">TestEmp</Typography>
                    <ProfileMenu sx={{flexGrow: 0}}/>
                </Toolbar>
            </AppBar>
            <Box 
                component="nav"
                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
            >
                <Drawer variant="temporary">
                    {drawer}
                </Drawer>
                <Drawer
                    variant="permanent"
                    sx={{
                        display: { xs: 'none', sm: 'block' },
                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
                    }}
                    open
                >
                    {drawer}
                </Drawer>
            </Box>
            <Box 
                component="main"
                sx={{ flexGrow: 1, p: 2.5, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
            >
                <Toolbar/>
                <Breadcrumbs
                    separator={<NavigateNextIcon fontSize="small" />}
                    sx={{ pb: 1.5, pl: 0.5 }}
                >
                    {breadcrumbs}
                </Breadcrumbs>
                <Routes>
                    {elements}
                </Routes> 
            </Box>
        </Box>
    );
}

export default WorkPage;

Answer 1

The issue is you're using BrowserRouter as a Route which is incorrect. That's meant to be a wrapper for Routes which is a wrapper for Route.

Typically you would bring in 3 imports like this:

import { BrowserRouter, Route, Routes } from "react-router-dom";

Then inside your app somewhere define them:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<div>Hello World</div>} />
  </Routes>
</BrowserRouter>

Don't do this:

import { BrowserRouter as Route, ... }