初学NextJS-了解路由

既然学会了React，那NextJS肯定是一款不可错过的React框架，这几天跟着官网的教程学习了一点nextJS的基础知识，如果你对NextJS感兴趣，快进来看一看吧。

路由

在React中，当我们不使用NextJS时，我们的路由代码可能是下面这样的：

const MyApp = () => {
    return(
        < Routes >
        < Route path='/' element= { < Navigation /> }>
    < Route index element= { < Home /> } />
    < Route path='product' element= { < Product /> } />
    < Route path='auth' element= { < Authentication /> } />
    < Route path='category' element= { < Category /> } />
        </ Route >
        </ Routes >
    )
}

在nextJS中，路由会根据pages 文件夹下的路径来创建，也就是文件的路径成为了URL路径。

例如下面的文件路径，NextJS将会推断pages 下的index.js为起始页面/ ；about.js 则是/about ；/product 下的index.js 为/product ；[id].js 为product/1(给定的id) ，这是动态参数。

\

动态参数 ：在文件名中使用[] 来作为一个动态路由，[] 中的文件名（例如id）作为一个暂时的占位符，由用户向URL路径传递特定的query参数来查询对应数据库里所需的数据，然后由NextJS进行预渲染来展示页面。

我们可以使用useRouter 这个hook来获取query参数

特殊的如[...slug].js ，可以很灵活的传递url参数，通过/ 来分隔每一个参数例如下面

在pages 下创建blog 文件夹，创建[...slug].js

//[...slug].js
import { useRouter } from "next/router";

export default function Blog () {
const route = useRouter ()

 console.log ( route.query )

return (
 < div >
 < h1 > This Blog Page </ h1 >
 </ div >

打开http://localhost:3000/blog/date/uid/1 后，观察控制台会查看query ,会如下所示

---

有关<a> 与<LInk> : <a>会在点击后发送一个http请求，之后会转到新的html页面上，这会导致React context 或者 Redux 中的状态丢失，这很显然对我们很不友好，所以我们在NextJS中使用<Link> 来替代<a> ，并且<Link> 有着更好的优化。

---

将<LInk> 与动态参数结合使用 ：我们总是通过对应用户的一些信息(来自表单或数据库)来构成动态参数，不妨使用数组将他们存在一起（便于管理），然后使用<LInk> 来进行页面间导航。

import Link from "next/link";

export default function Home() {
    const clients = [
        //some data
    ]
    
    return(
        <div>
            {clients.map(client => {
                <li key={client.id}>
                    <Link href={{
                        pathname: "/clients/[id]",
                        query: {id: client.id}
                        }}
                    >
                        {client.data}
                    </Link>
                </li>
            })}
        </div>    
    )
}

---

编程式导航 ：使用React中点击事件来进行页面间导航。

import { useRouter } from "next/router";

export default function Blog () {
const route = useRouter ()

function NavigationHandler () {
route.push ({
pathname: '/clients/[id]',
            query: { id: '1' }
})
}

return (
 < div >
 < button onClick= { NavigationHandler } > Load Page </ button >
 </ div >
)
} 

---