静态路由的标签跳转和编程跳转

目录

标签跳转

标签

很简单直观，直接写在js中，和html中的很像

首页index.tsx中写

test.tsx中写

test2.tsx中写

编程跳转Router.push

复用性更强，用在js里，可以写在方法中，也可以用在普通的业务逻辑中

首页写入

 写成方法复用

---

标签跳转<Link>标签

很简单直观，直接写在js中，和html中的<a>很像

首页index.tsx中写

import React from "react";
import Link from "next/link";

const Home = () => (
    <>
      <div>Home</div>
      <div>
        <Link href="/test">
          Test
        </Link>
      </div>
      <div>
        <Link href="/test2">
          Test2
        </Link>
      </div>
    </>
  );

  export default Home;

test.tsx中写

import Link from "next/link";

export default () => (
    <>
        <div>
            test page
        </div>
        <Link href="/">
            <span>Home</span>
        </Link>
    </>
);

test2.tsx中写

import Link from "next/link";

export default () => (
    <>
        <div>
            test2 page
        </div>
        <Link href="/">
            Home
        </Link>
    </>
);

编程跳转Router.push

复用性更强，用在js里，可以写在方法中，也可以用在普通的业务逻辑中

首页写入

import React from "react";
import Link from "next/link";
import Router from "next/router";

const Home = () => (
    <>
      <div>Home</div>
      <div>
        <Link href="/test">
          Test
        </Link>
      </div>
      <div>
        <Link href="/test2">
          Test2
        </Link>
      </div>
      <div>
        <button onClick={() => Router.push("/test")}>
          Test
        </button>
      </div>
    </>
  );

  export default Home;

 写成方法复用

import React from "react";
import Link from "next/link";
import Router from "next/router";

const Home = () => {
  function gotoTest() {
    Router.push("/test");
  }

  return (
    <>
      <div>Home</div>
      <div>
        <Link href="/test">
          Test
        </Link>
      </div>
      <div>
        <Link href="/test2">
          Test2
        </Link>
      </div>
      <div>
        <button onClick={gotoTest}>
          Test
        </button>
      </div>
    </>
  )}

  export default Home;