How to solve this routing conflict? (pages router)
Answered
Transvaal lion posted this in #help-forum
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
it should go to
/need/add.tsx
if you go to /need/add
what version of next are you using
Transvaal lionOP
it doesn't
14.1
I just init a new project and try it
it does
Transvaal lionOP
check if you have middleware or any rewrite/redirect in
next.config.js
Transvaal lionOP
Transvaal lionOP
I am really gonna lose my mind lol
nothing!
Transvaal lionOP
perhaps
paths: []
in index.tsx
is the issue?it still work with it
I just added that
Transvaal lionOP
I am really baffled
could you show the code
/need/add.tsx
/need/[id]/index.tsx
/need/[id]/index.tsx
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?
yes
comment out
getStaticProps
on both page and try againTransvaal lionOP
still hitting
/need/[id]/index.tsx
:(do you have anything in
next.config.js
Transvaal lionOP
nothing apart from i18n configuration + react string mode
try creating a page on /need/create.tsx
Transvaal lionOP
it works...
function Create() {
return <div>Create</div>;
}
export default Create;
lol...
#@??@#@?#@#@
yes it should work
have you tried
/next/add
on different browserTransvaal lionOP
that shouldn't be relevant, but I did, nothing changed
how come
add.tsx
fails but create.tsx
is okay?!not sure or could you share the repo
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 :(
you mean this?
function AddNeed() {
return (
<h1>something</h1>
)
}
export default AddNeed;
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;
Transvaal lionOP
what the hell does the
locale
prop has to do with /need/[id]/index.tsx
?!Transvaal lionOP
I am lost. I just resarted the server and the error is gone...
Answer
Transvaal lionOP
@Ray truly appreciate your time.
no prob