How to solve this routing conflict? (pages router)
Answered
Transvaal lion posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
Expressed in React Router's way, the routes are:
-
-
-
However when I try
I have this project structure:
-
-
-
-
/need/add
-
/need/:id
-
/need/:id/proposals
However when I try
localhost:3000/need/add
it hits /need/[id]/index.tsx
and considers add
as a slug.I have this project structure:
-
/need/add.tsx
-
/need/[id]/index.tsx
-
/need/[id]/proposals.tsx
Answered by Transvaal lion
I am lost. I just resarted the server and the error is gone...
47 Replies
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
it should go to
/need/add.tsx
if you go to /need/add
what version of next are you using
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
it doesn't
14.1
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
I just init a new project and try it
it does
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201287761248919572/image.png?ex=65c94569&is=65b6d069&hm=a311c62ed61e68a6f9f1ae3e912cd25d8170b7ff5764070ad97bc36d254ba0b9&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
check if you have middleware or any rewrite/redirect in
next.config.js
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201287819860119622/image.png?ex=65c94577&is=65b6d077&hm=98e7475abcce0d04e63db21913dc61f74ef10dda91679f4c60ff61cb37c06d78&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201287819012878376/image.png?ex=65c94576&is=65b6d076&hm=1ccfeae13c8c7a6ffd1233dec3ebfbaca0f0233bac4e5900e4d26c26e8dbf0ae&)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
I am really gonna lose my mind lol
nothing!
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201288033371164782/image.png?ex=65c945aa&is=65b6d0aa&hm=184d47a2f494b02ed9b754b1466d20f67e21e4fc1f5cbd7723bcb3baa2c0f5c7&)
![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201288033656389703/image.png?ex=65c945aa&is=65b6d0aa&hm=29a045d4f43b09c4f523a43baef52fdac2365534bb6970c5c82cbe0b0448b6d9&)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
perhaps
paths: []
in index.tsx
is the issue?![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201288130238619769/image.png?ex=65c945c1&is=65b6d0c1&hm=2752181bafcd41146526ebf87c4ed8862f71d0e45bedebab5247d5455d8beb65&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
it still work with it
I just added that
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
I am really baffled
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
could you show the code
/need/add.tsx
/need/[id]/index.tsx
/need/[id]/index.tsx
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
Sure.
/need/[id]/index.tsx
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer', 'needs']))
}
});
export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
console.log('triggered :(');
return {
paths: [], //indicates that no page needs be created at build time
fallback: 'blocking' //indicates the type of fallback
};
};
function Need() {
const [needDetails, setNeedDetails] = useState<NeedType>();
const router = useRouter();
const id = router.query.id as string;
useEffect(() => {
const fetchAndSetNeedDetails = async () => {
const need = await NeedsService.getNeedById(id);
setNeedDetails(need.data);
};
fetchAndSetNeedDetails();
}, [id]);
return (
<section className="bg-heroLightBlue">
{needDetails ? (
<div className="flex flex-col gap-4 py-10 md:flex-row md:items-start md:justify-center">
<div className="w-full max-w-5xl">
<NeedDetails needData={needDetails!} />
</div>
<div className="w-full md:max-w-[21.25rem]">
<SideBarDetails setNeedDetails={setNeedDetails} needData={needDetails} />
</div>
</div>
) : (
<Loading />
)}
</section>
);
}
export default Need;
/need/add.tsx
export const getStaticProps: GetStaticProps = async ({ locale }) => {
console.log('I wish this would trigger :)');
return {
props: {
...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer']))
}
};
};
function AddNeed() {
return (
<h1>something</h1>
)
}
export default AddNeed;
you're using the pages router?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yes
comment out
getStaticProps
on both page and try again![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
still hitting
/need/[id]/index.tsx
:(![Image](https://cdn.discordapp.com/attachments/1201284733208887377/1201290918339289219/image.png?ex=65c94859&is=65b6d359&hm=553b2de3588fc1cc6fd5957356dfb611e20718feede4e2ac9d0fb2186885c75e&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
do you have anything in
next.config.js
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
nothing apart from i18n configuration + react string mode
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
try creating a page on /need/create.tsx
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
it works...
function Create() {
return <div>Create</div>;
}
export default Create;
lol...
#@??@#@?#@#@
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yes it should work
have you tried
/next/add
on different browser![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
that shouldn't be relevant, but I did, nothing changed
how come
add.tsx
fails but create.tsx
is okay?!![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
not sure or could you share the repo
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
I think I am getting somewhere... I just commented out almost all JSX of
add.tsx
and replaced it with dummy text, it workedunfortunately not, I can't do that :(
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
you mean this?
function AddNeed() {
return (
<h1>something</h1>
)
}
export default AddNeed;
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
I shared this because I thought it was equivalent to the code I had (it's really not)
it was naive of me
I am trying now to pinpoint where the error is coming from. So far it's coming from
<Formik>
it seemsimport enUS from 'date-fns/locale/en-US';
import fr from 'date-fns/locale/fr';
import { TFunction } from 'i18next';
import { DayPicker } from 'react-day-picker';
import { useTranslation } from 'next-i18next';
import { Setter } from '@/types/others';
import RadioButtonField from '@/components/RadioButtonField';
import { useRouter } from 'next/router';
interface DateStepProps {
selectedDate: Date;
setSelectedDate: Setter<Date>;
selectedDateOption: number;
setSelectedDateOption: Setter<number>;
}
const dateOptions = (t: TFunction) => [
{ id: 1, label: t('add_need.date.option_1') },
{ id: 2, label: t('add_need.date.option_2') },
{ id: 3, label: t('add_need.date.option_3') }
];
function DateStep({
selectedDate,
setSelectedDate,
selectedDateOption,
setSelectedDateOption
}: DateStepProps) {
const router = useRouter();
const { t } = useTranslation();
return (
<section>
<ul className="flex flex-col sm:flex-row sm:justify-between">
{dateOptions(t).map((option: any, index) => {
return (
<li key={index} className="pl-2 pt-2 sm:p-3 sm:pt-4">
<RadioButtonField
label={option.label}
checked={selectedDateOption === option.id}
onChange={() => setSelectedDateOption(option.id)}
/>
</li>
);
})}
</ul>
<div className="mt-2 flex justify-center sm:mt-10">
{selectedDateOption !== 1 && (
<DayPicker
mode="single"
fromDate={new Date()}
required
selected={selectedDate}
modifiersClassNames={{ selected: 'my-selected-day' }}
weekStartsOn={0}
onDayClick={(day) => setSelectedDate(day)}
{/* THIS BELOW! */}
locale={router.locale === 'fr' ? fr : enUS}
/>
)}
</div>
</section>
);
}
export default DateStep;
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
what the hell does the
locale
prop has to do with /need/[id]/index.tsx
?!![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
I am lost. I just resarted the server and the error is gone...
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Transvaal lionOP
@Ray truly appreciate your time.
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
no prob