Передача данных?

function createData(
  id,
  actNumber,
  regDate,
  violationType,
  actionState,
  counterSize,
  regionCity,
  department,
  unit,
  contractorType,
  consumerStatus
) {
  return {
    id,
    actNumber,
    regDate,
    violationType,
    actionState,
    counterSize,
    regionCity,
    department,
    unit,
    contractorType,
    consumerStatus,
  };
}

export default function ActsPage() {

  const classes = useStyles();
  const [userData, setUserData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(15);
  const [searchQuery, setSearchQuery] = useState('');
  const [pageQty, setpageQty] = useState(0);
  const [query, setQuery] = useState('');

  const navigate = useNavigate();
  

  useEffect(() => {
  const fetchData = async (page) => {
    const token = "284|jO1hwCex1S5qeWZV1guAXdIOXLYwACCFI0wYyLez";
    const config = {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };

    try {
      axios.get(BASE_URL + `&page=${page}`, config).then(
        ({data}) =>{ 
          console.log(data)
          setUserData(data.data) //указываем место где лежат акты 
          setPerPage(data.per_page);
          setIsLoading(false);
          setpageQty(data.current_page && data.last_page) //количество страниц 
       
        }
      )

    } catch (error) {
      console.error('Ошибка загрузки данных:', error);
      setIsLoading(false);
    }
  };
  fetchData(currentPage);
  }, [currentPage, query]);

  const row = query.data && query.data.map((act) => createData(act.id, act.act_number, act.reg_date, act.violation_type.violation_description + ' ' + act.violation_type.violation_name, act.action_state.state, act.counter_size.counter_size, act.region.region_name + ' , ' + act.city.city_name, act.department.department_name, act.unit.unit_name, act.contractor_type.contractor_type_name, act.is_consumer === 1 ? 'Споживач' : 'Не споживач'))
  const filteredRows = userData.filter((act) => act.act_number.toLowerCase().includes(searchQuery.toLowerCase()));

  const handlePageChange = (page) => {
    setCurrentPage(page);
    
  };

  
  // eslint-disable-next-line no-unused-vars
  const [activeTab, setActiveTab] = useState(0)
  const handleTabClick = (tabIndex) => {
    setActiveTab(tabIndex);
    navigate('/dashboard/newact'); 
  }

  return (

    <ThemeProvider theme={defaultTheme}>
       
      <Container maxWidth="xl" sx={{ mt: 4, mb: 4, opacity:1}}>
        <Grid container spacing={3}>
          <Grid item xs={12} md={8} lg={12}>
            <Paper
              sx={{
                p: 2,
                display: 'flex',
                flexDirection: 'column',
                }}>
            <Grid item xs={12} md={8} lg={12}>
              <Typography
                component="h2"
                variant="h6"
                color="primary"
                gutterBottom
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    }}> Журнал актів порушень
              </Typography>
              <Stack direction="row" spacing={0} sx={{ pb: 5, display: 'flex', justifyContent: 'space-between' }}>
                 <Button sx={{ display: 'flex', alignItems: 'center' }}
                    onClick={() => handleTabClick(0)} to='/dashboard/newact'
                    variant="contained" 
                    endIcon={<AddIcon/>}>
                      Створити новий акт
                   </Button>
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Пошук актів"
                      sx={{
                        padding: '10px', 
                        borderRadius: '4px', 
                        border: '1px solid #ccc', 
                        width: '100%', 
                        }}/>
              </Stack>
              
              <TableContainer component={Paper} className={classes.tableContainer}>
                {isLoading ? (
                  <CircularProgress />
                ) : (
                <>
                  <Table>
                    <TableHead>
                      <TableRow>
                      <TableCell className={classes.tableCell}>ID</TableCell>
                        <TableCell className={classes.tableCell}>№ Акту порушень</TableCell>
                        <TableCell className={classes.tableCell}>Дата та час реєстрації та виявлення порушення</TableCell>
                        <TableCell className={classes.tableCell}>Відділення/дільниця</TableCell>
                        <TableCell className={classes.tableCell}>Адреса порушення</TableCell>
                        <TableCell className={classes.tableCell}>Вид контрагента</TableCell>
                        <TableCell className={classes.tableCell}>Прізвище та ініціали споживача або назва оридичної особи</TableCell>
                        <TableCell className={classes.tableCell}>ПІБ, посада пред-ка, органу м. самоврядування який присутній на місці виявленого порушення</TableCell>
                        <TableCell className={classes.tableCell}>Особистий рахунок</TableCell>
                        <TableCell className={classes.tableCell}>Структурний пвдрозділ, який виявив порушення</TableCell>
                        <TableCell className={classes.tableCell}>ПІБ представника АТ,який виявив порушення</TableCell>
                        <TableCell className={classes.tableCell}>Вид порушення</TableCell>
                        <TableCell className={classes.tableCell}>Стан дії по порушенню</TableCell>
                      </TableRow>
                    </TableHead>
                  <TableBody>
                {filteredRows.map((row) => (
                  
                  <TableRow key={row.id}>
                   
                     <TableCell style={{ width: 160 }} component="th" scope="row">
                      <Link to={`/dashboard/act/${row.id}`}>{row.id}</Link>
                    </TableCell>
                    <TableCell className={classes.tableCell}>{row.act_number}</TableCell>
                    <TableCell className={classes.tableCell}>{row.reg_date}</TableCell>
                    <TableCell className={classes.tableCell}>{row.department.department_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.street.street_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.contractor_type.contractor_type_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.fiz_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.unit.unit_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.personal_account}</TableCell>
                    <TableCell className={classes.tableCell}>{row.region.region_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.unit.unit_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.violation_type.violation_description}</TableCell>
                    <TableCell className={classes.tableCell}>{row.action_state.state}</TableCell>
                  </TableRow>

Передача данных?

я понимаю, но как его передать что он не был undefined?

Есть Route но они не совмем так работают как нужно?

Михаил Р.,

Есть Route но они не совмем так работают как нужно?

Михаил Р., не помогло, контент все равно появляется без dashboard, в чем может быть еще проблема?

Есть Route но они не совмем так работают как нужно?

Огромное спасибо за помошь) путь меняется все переходитБ но что еще нужно изменить на кпопке что бы контент появился с нави панелью Dashboard? Вот как у меня прописано но оно появляется без Dashboard

const handleShowActsTable = () => {
    onToggleActsTable();
    if (location.pathname !== 'acts') {
      navigate('acts');
    }
  };

  const handleShowSupportPage = () => {
    onToggleSupportPage();
    if (location.pathname !== 'support') {
      navigate('support');
    }
  };
  return (
    <>
      <ListItem onClick={handleShowActsTable}>
        <ListItemButton>
          <ListItemIcon>
            <DashboardIcon />
          </ListItemIcon>
          <ListItemText primary="Акти порушень" />
        </ListItemButton>
      </ListItem>