React服务端渲染框架Next.js入门之旅三:路由跳转和参数传递

不带参数,静态路由;带参数,根据参数不同显示不同内容,动态路由。

一、路由跳转

标签式跳转

在pages下新建juanA.js以及juanB.js作为两个跳转页面。

juanA.js:

import Link from 'next/link'
export default ()=>(
    <>
        <div>juanA page</div>
        {/* 文档中规定必须放a标签,Link下只能有一个父级标签,即多个标签要用一个a标签包裹起来 */}
        <Link href='/'>
            <a>返回首页</a>
        </Link>
    </>
)

juanB.js:

import Link from 'next/link'
export default ()=>(
    <>
        <div>juanB page</div>
        {/* 必须放a标签 */}
        <Link href='/'><a>返回首页</a></Link>
    </>
)

修改index.js:

import React from 'react'
import Link from 'next/link'

const Home = ()=>(//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
    <>
        <div>我是首页</div>
        <div><Link href="/juanA"><a>去juanA页面</a></Link></div>
        <div><Link href="/juanB"><a>去juanB页面</a></Link></div>
    </>
)

export default Home

效果如下:

 

编程式跳转

复用性更强。
在index.js中引入router:

import Router from 'next/router'

在index.js中增加一个按钮,点击跳转到juanA页面(增加了业务逻辑goToA方法,注意修改为大括号):

const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
    function goToA(){
        Router.push('/juanA')
    }

    return (
        <>
            <div>我是首页</div>
            <div><Link href="/juanA"><a>去juanA页面</a></Link></div>
            <div><Link href="/juanB"><a>去juanB页面</a></Link></div>
            <div>
                <button onClick={goToA}>juanA</button>
            </div>
        </>
    )
}

效果如下:

二、参数传递

Next.js框架只能用query传递参数,比如?id=1。

标签形式

传递参数

修改index.js文件:

import React from 'react'
import Link from 'next/link'

const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号

    return (
        <>
            <div>我是首页</div>
            <div>
                <Link href="/sport?name=篮球"><a>选择篮球</a></Link>
                <br/>
                <Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
            </div>
        </>
    )
}

export default Home

接收参数

在pages下新建sport.js文件:

import {withRouter} from 'next/router'
import Link from 'next/link'

// 只有使用withRouter才能有router的值
const Sport = ({router})=>{
    return (
        <>
            <div>{router.query.name}是我最喜欢的运动</div>
            <Link href="/"><a>返回首页</a></Link>
        </>
    )
}
export default withRouter(Sport)

效果如下:

编程形式

引入router:

import Router from 'next/router'

新增一个按钮跳转到sport页面,并编写方法传递参数,这里传递的是一个对象(也可以用带?的简单字符串):

import React from 'react'
import Link from 'next/link'
import Router from 'next/router'

const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号

    function gotoSport(){
        Router.push({
            pathname:'/sport',
            query:{name:'篮球'}
        })
        // 同以下:
        // Router.push('/sport?篮球')
    }

    return (
        <>
            <div>我是首页</div>
            <div>
                <Link href="/sport?name=篮球"><a>选择篮球</a></Link>
                <br/>
                <Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
            </div>
            <div>
                <button onClick={gotoSport}>选篮球</button>
            </div>
        </>
    )
}

export default Home

实现效果:

那么Link标签的形式能不能传递对象呢?当然可以。

修改篮球的Link跳转如下:

<Link href={{pathname:'/sport',query:{name:'篮球'}}}><a>选择篮球</a></Link>

运行项目,跳转成功。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 前框架是一种辅助前开发的工具,它提供了一组框架和约定,帮助开发者更快速地构建 Web 应用程序。常见的前框架包括: - Next.js:这是一个基于 React服务渲染框架,可以帮助开发者快速构建高性能的 Web 应用程序。 - Remix:这是一个基于 Vue 的元框架,提供了一组组件和工具,帮助开发者快速构建 Web 应用程序。 - Gatsby:这是一个基于 React 的静态站点生成器,可以帮助开发者快速构建高性能的静态站点。 - Nuxt.js:这是一个基于 Vue 的服务渲染框架,可以帮助开发者快速构建高性能的 Web 应用程序。 这些前框架各有特点,例如 Next.js 和 Nuxt.js 提供了服务渲染的能力,可以帮助开发者构建高性能的 Web 应用程序;Gatsby 是一个静态站点生成器,可以帮助开发者快速构建高性能的静态站点。您可以根据自己的需求选择适合的前框架来使用。 ### 回答2: 前框架是一种提供了更高级别的抽象和功能的框架,它们使得开发者可以更快速、更高效地构建现代化的 Web 应用程序。以下是一些常见的前框架及其特点和区别: 1. Next.jsNext.js 是一个基于 React 的前框架,它提供了服务渲染(SSR)和静态生成(SSG)的能力。它可以改善 SEO,提升应用程序的性能和加载速度,简化了路由和数据获取等方面的开发工作。Next.js 还有一个强大的插件生态系统,可以通过插件扩展其功能。 2. Remix:Remix 是一个全新的 JavaScript 框架,它可以帮助开发者构建现代化的 Web 应用程序。Remix 提供了服务渲染、数据加载和路由管理等功能,并且非常注重开发者体验。Remix 对于 SEO 和性能优化也有很好的支持。 这两个前框架有以下一些共同的特点: - 服务渲染和静态生成的能力:这两种框架都支持在服务渲染页面,提供更好的性能和更快的加载速度。 - 路由管理:它们都提供了简化的路由管理系统,使得开发者可以更好地组织和管理页面之间的跳和路由逻辑。 - 数据获取:它们都支持通过 API 或其他方式获取数据,并将数据注入到页面中。 - 插件和扩展:这两个框架都有丰富的插件生态系统,可以通过插件扩展框架的功能。 Next.js 和 Remix 之间的区别主要在于框架本身的实现方式、生态系统和开发者体验上的差异。Next.js 是基于 React 的,相对来说更成熟,拥有更庞大和丰富的插件生态系统。而 Remix 是一个全新的框架,旨在提供更好的开发者体验,并具有更好的可扩展性和性能优化能力。开发者可以根据自己的需求和喜好选择适合的框架来构建应用程序。 ### 回答3: 前框架是为了简化和优化前开发而设计的框架。其中,Next.js和Remix是两种常见的前框架。它们有以下区别和特点: 1. Next.jsNext.js是一个基于React的前框架。它主要强调了页面的服务渲染和静态网站生成。Next.js提供了很多内置功能,如代码分割、自动预取、热模块替换等,可以快速开发性能优化的网站应用。此外,Next.js还支持动态路由,使得创建动态页面变得更加容易。 2. Remix:Remix则是一个更加全面的前框架。它集成了路由、数据加载、服务渲染和构建优化等功能,可以覆盖整个前开发流程。Remix的灵感来自于Next.jsReact Router,并在此基础上增加了很多新的特性。Remix支持多种服务渲染方式,包括同时支持RESTful和GraphQL API。它还提供了一个强大的插件系统,允许开发者扩展和定制框架的功能。 总的来说,Next.js和Remix都是优秀的前框架,它们各自有不同的特点和使用场景。Next.js着重于静态页面生成和性能优化,适用于构建静态网站和应用;而Remix则提供了更全面的功能和灵活性,适用于更复杂的前应用开发。选择适合自己需求的框架,可以提高开发效率并优化网站性能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值