初步学习next.js-2-组件，路由，传递参数

2021-02-04 02:14

阅读：728

标签：一个 page path word 初步 link one imp 传递参数

pages和components

1.直接在根目录下的pages文件夹下，新建一个jsyang.js页面，启动后访问路径为/jsyang

2.在根目录下新建文件夹components,新建组件com1.js文件，

export default ({children})=>

在需要引入的页面中

import Com1 from ‘../components/com1‘

直接写

按钮

路由和跳转

　　标签式导航

import Link from ‘next/link‘

import Link from ‘next/link‘

export default ()=>(
    
        A page 

　　　　　// link标签里必须家
        返回首页
    >
)

　　Router模块进行跳转

import Router from ‘next/router‘

传递和接收参数

　　传递参数，只能用query来传递

import Router from ‘next/router‘

import Link from ‘next/link‘

aaaa

Router.push(‘/xiaojiejie?name=井空‘)

Router.push({
      pathname:‘/xiaojiejie‘,
      query:{
        name:‘井空‘
      }
    })

aaa

　　接收参数

import { withRouter} from ‘next/router‘

const Xiaojiejie = ({router})=>{
    return (
        
            {router.query.name},来为我们服务了 .
        >
    )
}

export default withRouter(Xiaojiejie)

初步学习next.js-2-组件，路由，传递参数

标签：一个 page path word 初步 link one imp 传递参数

原文地址：https://www.cnblogs.com/lxz-blogs/p/13151614.html

上一篇：php随机生成汉字

下一篇：.net core Swagger添加bearer token参数

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：初步学习next.js-2-组件，路由，传递参数
文章链接：http://soscw.com/index.php/essay/50686.html

亲，登录后才可以留言！

初步学习next.js-2-组件，路由，传递参数

评论

热门文章

推荐文章

最新文章

置顶文章