接上節(jié)內(nèi)容,此文章,會介紹參數(shù)傳遞

參考官網(wǎng):https://nextjs.org/learn/basics/getting-started
開發(fā)環(huán)境:
window10 x64
node v10.16.3
npm v6.13.4

1.參數(shù)傳遞

1.1. query strings傳遞

這個沒什么特別,就是把參數(shù)放到url,然后另一個頁面通過url接收罷了.
我們現(xiàn)在在home頁加一個跳轉(zhuǎn)鏈接,點擊時候跳轉(zhuǎn)到about頁,順帶把'from_home'這個參數(shù)值傳過去.
修改'pages/index.tsx'文件,加上如下代碼:

<Link href={`/about?param=from_home`}>
  <a>to about page</a>
</Link>

圖1.png

然后我們修改'pages/about.tsx'文件,讓它接收一下參數(shù),啟動一下,就能看到效果.

//pages/about.tsx

import Header from '../components/Header';
import { useRouter } from 'next/router'; //引入路由

const About = () => {
    const router = useRouter(); //初始化路由

    return (
        <div>
            <Header pageName='about'/>
            <p>This is the about page</p>
            
            <p>This param from home page:{router.query.param}</p>{/* 接收來自home傳來的參數(shù) */}
            
        </div>
    );
}

export default About;

圖2.png

1.2. 路由傳遞

通過query strings傳遞,url是這個樣子的:'http://localhost:3000/about?param=from_home'
有人會覺得這樣不好看,參數(shù)暴露之類的,那么我們是否能約束一下,自定義一個傳遞格式呢?
答案是肯定的,這里介紹路由傳遞:
ps:官網(wǎng)都是用id做例子,但我覺得id太正式,難免讓人聯(lián)想到id是不是特殊字段,不能變?如圖3,官網(wǎng)示例

如圖3官網(wǎng)示例.png

//pages/p/[param].tsx

import { useRouter } from 'next/router'; //引入路由

const DynamicRouting = () => {
    const router = useRouter(); //初始化路由

    return (
        <div>
            <p>This is Dynamic Routing Page</p>
            
            <p>This param from home page by route:{router.query.param}</p>{/* 接收來自home傳來的參數(shù) */}
        </div>
    );
}

export default DynamicRouting;

如圖4.png

現(xiàn)在,我們在home頁面,寫一個鏈接跳轉(zhuǎn)過去路由傳遞頁面([param].tsx)
在'page/index.tsx'添加如下代碼

//pages/index.tsx

<br/><br/>
      <Link href="/p/[param]" as={`/p/from_home`}>
        <a>to about page by route </a>
      </Link>

如圖5.png

注意藍色圖5的藍色框,那是參數(shù),在'pages/p/[param].tsx'中,會通過'router.query.param'拿到.保存一下,可以在瀏覽器看到效果,如圖6:

圖6.png