从做中学02-Nextjs

路由

Next.js 没有路由配置文件。只要在 pages 文件夹下创建的文件，都会默认生成以文件名命名的路由。

页面导航有两种形式，①通过<Link>标签跳转；②通过编程式跳转Router.push

const Home=()=>(
     <>
         <div>我是首页</div>
         <div><Link href="/firstOne"><a>去第一个页面</a></Link></div>
         <div>
             <button onClick={()=>{Router.push('/second')}}>goto second</button>
         </div>
     </>
 )

 

const Home = () => {
    function gotoA(){
        Router.push('/firstOne');
    }
    return (
        <>
            <div>我是首页</div>
            <div><Link href="/firstOne"><a>去第一个页面</a></Link></div>
            <div>
                <button onClick={gotoA}>goto firstOne</button>
            </div>
        </>
    )
}

 如果需要给路由传参数，则使用query string的形式

取参数的时候，需要借助框架提供的withRouter方法，参数封装在 query 对象中：

import Link from 'next/link'
// 接收参数
import {withRouter} from 'next/router'

const fafa = ({router})=>{
    return(
        <>
            <div>{router.query.name}来啦</div>
            <Link href="/"><a>返回首页</a></Link>
        </>
    )
}
export default withRouter(fafa)

Link写法，第一种写法：

<div><Link href="/firstOne?name=Monica"><a>去第一个页面</a></Link></div>

第二种写法：同样的效果Link使用对象形式

<div><Link href={{pathname:'/firstOne',query:'name=Monica'}}><a>去第一个页面</a></Link></div>

 

路由事件

可以通过Router监听路由器内部发生的不同事件，以下为6个钩子事件

  • routeChangeStart(url) 当路由开始改变时触发
  • routeChangeComplete(url) 路由完全改变时触发
  • routeChangeError(err, url) 更改路由时发生错误或取消路由负载时触发
  • beforeHistoryChange(url) 在更改浏览器的历史记录之前触发
  • hashChangeStart(url) 当哈希值改变但页面不改变时触发
  • hashChangeComplete(url) 哈希值更改但页面未更改时触发

 

给组件添加样式

Next.js 在 JS 框架中预加载了一个称为 styled-jsx 的 CSS,该 CSS 使你的代码编写更轻松.它允许您为组件编写熟悉的 CSS 规则.规则对组件（甚至子组件）以外的任何东西都没有影响.简单来说就是带有作用域的 css

 自定义Head

自定义Head更友好的SEO

import Head from 'next/head'

function Header(){
    return(
        <>
            <Head>
                <title>加油加油加油</title>
                <meta charSet='utf-8'></meta>
            </Head>
            <div>Hello!Fighting!</div>
        </>
    )
}

export default Header

 

posted @ 2021-03-17 13:59  超级玛丽o  阅读(65)  评论(0)    收藏  举报