Question

如果用户位于主页上，则单击“标题”菜单中的“主页”选项将刷新并加载同一页面。在页眉布局中使用<Link as='/homepage' href='/landing'>Home Page</Link>并使用自定义服务器来处理所有URL请求。

Answer 1

这是我的示例代码，在这里我使用了 react-router-dom 而不是next.js

基本上，我有3个功能组件Home，Page1和Page2，而Inside App.js则保留了路线

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;

主页组件

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

导出默认主页；

Page1组件

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

export default Page1;

Page2组件

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

export default Page2;

没有页面刷新，它只是最初加载，就是这样

希望我能理解您的高级想法对您有帮助

Answer 2

我遇到了同样的问题。对我来说，事实证明是我在页面的索引文件中使用getServerSideProps。我在滥用它，因此可以将其替换为getStaticProps。检查您正在使用的nextjs数据获取功能可能是一个好主意。（https://nextjs.org/docs/basic-features/data-fetching）。

Nextjs链接标记指向同一页面会导致刷新

2 个答案: