React的SSR服务端渲染之Next

最新推荐文章于 2024-08-11 11:22:03 发布

进阶的巨人001

最新推荐文章于 2024-08-11 11:22:03 发布

阅读量282

点赞数

文章标签： react SSR

本文链接：https://blog.csdn.net/weixin_45389051/article/details/108103422

版权

首先

在这里插入图片描述
创建我们的项目之后

在这里插入图片描述
这个index.js就是我们的默认路径/

当我们再创建一个about.js时候

在这里插入图片描述
这个about.js的路径就对应为/about

注:这个地方默认已经帮我们配置好路由了，这相当于是一种后端路由，由于是同构代码，所以既能在前端跑，也能在后端跑

一.页面跳转

当我们在index.js中这样跳转到about页面的时候

 <a href="/about">关于</a>

跳转时候页面会刷新，因为是从我们后端取的数据

那么如果想用类似前端路由跳转方式怎么办呢？

import Link from 'next/link'
 <Link href="/about"><button>关于</button></Link>

这样写就是前端路由跳转了，页面不会刷新

二.公共内容

比如一些内容，在这个组件，在那个组件同时存在，为了避免写重复的代码，可以这样做

创建一个组件,common.js

import React, { memo } from 'react'
import Head from 'next/head'
export default memo(function common(props) {
  return (
    <div>
      <Head>
        <title>标题</title>
        </Head>
        {props.children}
        <h1>无敌</h1>
    </div>
  )
})

Head就是这个地方，想加图标也可以
在这里插入图片描述
然后在需要的组件里面，先引入这个common组件,然后这样写,把之前的div换成Common即可,在另外需要common里面内容的组件都这样做

在这里插入图片描述
或者第二种办法，你把这个东西写在我们的_app.js里面

function MyApp({ Component, pageProps }) {
  return(
    <>
    <Component {...pageProps} />
    <h1>无敌</h1>
    </>
  )
}

三.路由传参

发送

 <Link href={`/about?id=1}`}>

接收

import {useRouter} from 'next/router'
export default memo(function bout() {
  const router = useRouter()
  return (
    <div>
      gogoing:{router.query.id}
    </div>
  )
})

或者我们这样传参

import Router from 'next/router'
export default function Home(props) {
  const connect = (id) =>{
    Router.push({
      pathname:'/about',
      query:{
        id:id
      }
    })
  }
  return (
    <div>
      <button onClick={e=>connect(1)}>跳转</button>
    </div>
  )
}

接收方法还是跟上面一致

四.网络请求

发送网络请求的话也是用axios

yarn add axios

import axios from 'axios'

 const {name}  =props

Home.getInitialProps = async(props)=>{
  const res = await axios({url:''})
  return {
   name:
  }
}