Next.js - Định tuyến nông
Trong Next.js, định tuyến cạn đề cập đến việc điều hướng đến cùng một trang nhưng không có lệnh gọi đến các phương thức getServerSideProps, getStaticProps và getInitialProps.
Để thực hiện định tuyến cạn, chúng tôi sử dụng Bộ định tuyến với cờ nông là đúng. Xem ví dụ dưới đây.
Cập nhật tệp index.js trong thư mục trang như sau.
import Router from 'next/router'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePageKhởi động Máy chủ Next.js
Chạy lệnh sau để khởi động máy chủ -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyXác minh đầu ra
Mở localhost: 3000 trong trình duyệt, sau đó nhấp vào liên kết Tải lại và bạn sẽ thấy kết quả sau.
