Location of parallel routes

Answered

Brown bear posted this in #help-forum

Brown bearOP

2024-05-07T07:47:42.009Z

In an effort to follow the official documentation and learn, I noticed a detail that confused me. Is the parallel routing code in layout.ts instead of page.tsx? If so, should it be in layout rather than the traditional page.tsx when building the UI?

Answered by ᴉuɐpɹɐɐ

there is no error.tsx in this

View full answer

47 Replies

Brown bearOP

2024-05-07T08:17:27.835Z

and i found useEffect not working on Parallel Routes, I can get console.log(data) but after i got anything

'use client'

import getData from "@/app/api/getData"
import { LineChart } from "@mui/x-charts/LineChart"
import { useEffect, useState } from "react"

const VisitorChart = () => {
    const [visitor, setVisitor] = useState([])
    useEffect(()=>{
        getData('visitor').then((data:any)=>{
            console.log(data)
            setVisitor(data)            
        }).catch(e=>{
            console.log(e)
        })
    },[])

    let uvData:any = []
    let pvData:any = []
    let date:any = []
    const timestamps = visitor.map((item:any) => new Date(item.timestamp).getTime());
    const minDate = new Date(Math.min(...timestamps));
    const maxDate = new Date(Math.max(...timestamps));
    // 构建包含所有日期的数组
    const currentDate = new Date(minDate);
    while (currentDate <= maxDate) {
        date.push(new Date(currentDate).toISOString().slice(0, 10));
        currentDate.setDate(currentDate.getDate() + 1);
    }
    console.log('dateRange', date)

    // 统计每天的地址数量
    const counts = visitor.reduce((acc:any, item:any) => {
    const date = new Date(item.timestamp).toISOString().slice(0, 10);
    acc[date] = (acc[date] || 0) + 1;
    return acc;
    }, {});
    uvData.push(counts)
    console.log('times', uvData)


    return (
        <LineChart sx={{ width: {xs: 300, sm:600 }, height: {xs: 150, sm: 300} }}
            xAxis={[{
                scaleType: 'point',
                data: date.map((d: any) => d),
            }]}
            series={[
            {
                label: 'UV',
                data: [2, 5.5, 2, 8.5, 1.5, 5],
            },
            {
                label: 'PV',
                data: [30,100,0,200,188,10],
            },
            ]}
      />
    )
}

export default VisitorChart;

Brown bearOP

2024-05-07T08:23:24.295Z

@B33fb0n3 Could you help me?

Brown bearOP

2024-05-07T08:32:08.592Z

got it

@Brown bear In an effort to follow the official documentation and learn, I noticed a detail that confused me. Is the parallel routing code in `layout.ts` instead of `page.tsx`? If so, should it be in layout rather than the traditional `page.tsx` when building the UI?

ᴉuɐpɹɐɐ

2024-05-07T15:05:11.475Z

If so, should it be in layout rather than the traditional page.tsx when building the UI?

Could be both

UI and templating goes to layout.tsx,
anything that changes or require immediate access to user request goes to page.tsx

you'd also need to write another page.tsx for the stuff thats in parallel routes

@ᴉuɐpɹɐɐ UI and templating goes to `layout.tsx`, anything that changes or require immediate access to user request goes to `page.tsx`

Brown bearOP

2024-05-09T10:18:19.577Z

This really confuses me. Why is parallel routing designed differently than other routing.

@Brown bear This really confuses me. Why is parallel routing designed differently than other routing.

ᴉuɐpɹɐɐ

2024-05-09T10:19:26.110Z

it should be the same

there is also page.js in parallel routes

what confuses you?

@ᴉuɐpɹɐɐ it should be the same

Brown bearOP

2024-05-12T06:26:19.991Z

this my layout.tsx

import Box from "@mui/material/Box"

const DashboardLayout = ( {
    children,
    agent,
    geo,
    offer,
    visitor,
}: Readonly<{ 
    children: React.ReactNode,
    agent: React.ReactNode,
    geo: React.ReactNode,
    offer: React.ReactNode,
    visitor: React.ReactNode,
}>) => {
    return (
        <Box p={{ sm: 4 }}>
            {children} 
            {agent}
            {geo}
            {offer}
            {visitor}
        </Box>
    )
}
export default DashboardLayout;

this page.tsx

 <Grid2
          container
          rowSpacing={{ xs: 2, sm: 2, md: 4 }}
          columnSpacing={{ xs: 0, sm: 2, md: 2 }}
          alignItems="center"
        >
          <Grid2 xs={12} md={6}>
            <Card sx={{ borderRadius: 4}}>
              <CardHeader title="Offer Received" avatar={<SignalCellularAltIcon />} />
              <CardMedia sx={{height:500}}>
                <OfferChart />
              </CardMedia>
            </Card>
          </Grid2>
          <Grid2 xs={12} md={6}>
            <Card sx={{ borderRadius: 4}}>
              <CardHeader className="bg-slate-300 dark:bg-slate-800" title="IP Address" avatar={<LanguageIcon />} />
              <CardMedia sx={{height:500}}>
                <GeoMap />
              </CardMedia>
            </Card>
          </Grid2>
        </Grid2>

I used parallel routing in page.tsx and did not get the advantage of parallelism

@Brown bear this my layout.tsx import Box from "@mui/material/Box" const DashboardLayout = ( { children, agent, geo, offer, visitor, }: Readonly<{ children: React.ReactNode, agent: React.ReactNode, geo: React.ReactNode, offer: React.ReactNode, visitor: React.ReactNode, }>) => { return ( <Box p={{ sm: 4 }}> {children} {agent} {geo} {offer} {visitor} </Box> ) } export default DashboardLayout;

ᴉuɐpɹɐɐ

2024-05-12T06:31:13.336Z

whats your folder structure

        <Box p={{ sm: 4 }}>
            {children} 
            {agent}
            {geo}
            {offer}
            {visitor}
        </Box>

this doesnt seem like you'd need parallelism at all...

You might get the benefit of parallelism if its like this

<Box>
  <Grid>
    {header}
  </Grid>
  <Grid>
    {children} 
  </Grid>
</Box>

the example you gave would just be overcomplicating yourself

you'd need parallelism if
a. you need different handling of route segmentation
b. you want a consistent layout but differing "slots"

Brown bearOP

2024-05-12T06:33:50.359Z

@ᴉuɐpɹɐɐ you'd need parallelism if a. you need different handling of route segmentation b. you want a consistent layout but differing "slots"

ᴉuɐpɹɐɐ

2024-05-12T06:34:48.633Z

by a. i mean if you have different child segments but you'd want the {header} to stay consistent.

You can have as many page.tsx /subfolder/subpages inside {chidlren} but only used ONE page.tsx in @header

Brown bearOP

2024-05-12T06:35:28.496Z

ᴉuɐpɹɐɐ

2024-05-12T06:35:33.991Z

if all of those [agent, geo, offer, visitor] is only shown in /dashboard then yeah.
I agree, no point in using parallelism

yep

its over complication

Brown bearOP

2024-05-12T06:37:14.011Z

😢 im newbie, and tring writting a dashboard feture, im following thie official guide do this. just can't working

how should i do.

ᴉuɐpɹɐɐ