Nextjs Link tag points to same page causes a Refresh

问题

If the user is on the Home page, clicking on the Home Page option in the Header Menu will cause a refresh and loads the same page. Using <Link as='/homepage' href='/landing'>Home Page</Link> inside the Header Layout and also a custom server to server all the URL requests.

回答1:

Here is my sample code, here I have used react-router-dom instead of next.js

Basically I have 3 functional component Home, Page1 and Page2 and Inside App.js I keep my route

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./home";
import Page1 from "./page1";
import Page2 from "./page2";

class App extends Component {
  render() {
    return (
      <Router>
        <div id="container">
          <div>
            <Link to="/">Home</Link>
            <Link to="/page1">Page 1</Link>
            <Link to="/page2">Page 2</Link>
          </div>
          <Switch>
            <Route path="/page1" component={Page1} />
            <Route path="/page2" component={Page2} />
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Home component

import React from "react";
const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

Page1 component

import React from "react";
const Page1 = () => {
  return <h1>page 1</h1>;
};

export default Page1;

Page2 component

import React from "react";
const Page2 = () => {
  return <h1>page 1</h1>;
};

export default Page2;

No page refresh, it just load initially, that's it

Hope it will help you if I understand your high level idea

来源：https://stackoverflow.com/questions/58989909/nextjs-link-tag-points-to-same-page-causes-a-refresh