Y brif broblem sy'n gysylltiedig â brig tudalen nesaf React Router yw y gall achosi ymddygiad annisgwyl wrth lywio rhwng tudalennau. Wrth lywio i dudalen newydd, bydd y porwr yn sgrolio yn ôl i frig y dudalen, a all fod yn annifyr i ddefnyddwyr sy'n disgwyl aros ar yr un dudalen neu sgrolio i lawr ymhellach. Yn ogystal, efallai na fydd yr ymddygiad hwn yn cael ei ddisgwyl gan ddefnyddwyr sydd wedi arfer â phatrymau llywio gwe mwy traddodiadol.
import { useRouter } from 'react-router-dom';
const NextPage = () => {
const router = useRouter();
const handleClick = () => {
router.push('/next-page');
};
return (
<div>
<button onClick={handleClick}>Go to next page</button>
</div>
);
};
// Llinell 1: Mae'r llinell hon yn mewnforio'r bachyn userRouter o'r llyfrgell react-router-dom.
// Llinell 3: Mae'r llinell hon yn datgan swyddogaeth o'r enw NextPage sy'n dychwelyd cydran React.
// Llinell 4: Mae'r llinell hon yn datgan newidyn o'r enw llwybrydd ac yn ei aseinio i'r bachyn userRouter.
// Llinell 6: Mae'r llinell hon yn datgan swyddogaeth o'r enw handleClick sy'n galw dull gwthio'r llwybrydd gyda dadl o '/next-page'.
// Llinellau 8-11: Mae'r llinellau hyn yn dychwelyd cydran React gydag elfen botwm sydd â set prop onClick i handleClick. Pan gaiff ei glicio, bydd hyn yn galw'r swyddogaeth handleClick ac yn llywio i '/next-page'.
Mae React Router yn llyfrgell llwybro bwerus sydd wedi'i hadeiladu ar ben React sy'n eich helpu i ychwanegu sgriniau a llifau newydd i'ch cymhwysiad yn anhygoel o gyflym, i gyd wrth gadw'r URL yn gyson â'r hyn sy'n cael ei arddangos ar y dudalen. Mae React Router yn ei gwneud hi'n hawdd llywio rhwng tudalennau mewn rhaglen React gan ddefnyddio ei ddull sy'n seiliedig ar gydrannau. Gyda chymorth cydrannau fel Link, NavLink, ac Ailgyfeirio, gallwch greu dolenni llywio deinamig a rhyngweithiol sy'n caniatáu i ddefnyddwyr symud o gwmpas eich app heb orfod teipio URLs â llaw. Yn ogystal, gallwch ddefnyddio'r gwrthrych hanes a ddarperir gan React Router i lywio'n rhaglennol rhwng tudalennau yn eich cais.
ScrollToTop neu frig y dudalen Nesaf
Mae ScrollToTop yn nodwedd yn React Router sy'n caniatáu i ddefnyddwyr sgrolio'n gyflym yn ôl i frig y dudalen wrth lywio rhwng gwahanol lwybrau. Mae'n arbennig o ddefnyddiol ar gyfer tudalennau hir gyda llawer o gynnwys, gan ei fod yn caniatáu i ddefnyddwyr neidio yn ôl i'r brig yn gyflym heb orfod sgrolio â llaw. Mae top y dudalen nesaf yn nodwedd debyg sy'n gweithio'n debyg ond yn lle sgrolio yn ôl i fyny, mae'n mynd â chi'n syth i'r dudalen nesaf wrth lywio rhwng llwybrau. Gall hyn fod yn arbennig o ddefnyddiol i ddefnyddwyr sy'n chwilio am wybodaeth benodol ar dudalen benodol ac nad ydyn nhw eisiau gorfod sgrolio trwy'r holl gynnwys ar dudalennau eraill cyn cyrraedd yno. Mae'r ddwy nodwedd yn ychwanegiadau gwych sy'n helpu i wella profiad y defnyddiwr a gwneud llywio'n haws ac yn gyflymach.
