如何使用 React-Router 的 NavLink 重新加載頁面？

Question

我使用NavLink突出顯示具有活動鏈接的按鈕，但想加載錨標記之類的頁面。 有可能這樣做嗎？

Answer 1

您可以將BrowserRouter 的 forceRefresh屬性設置為true ：

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

export default function BasicExample() {
  return (
    <Router forceRefresh>
      <div>
        <Link to="/">Home</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

當您單擊使用<Link>或<NavLink>為整個應用程序創建的鏈接時，它將重新加載整個頁面。 但是，如果您只想為單個<Link>重新加載，我認為您必須以其他方式進行，例如window.location.reload() 。

這是CodeSandbox 。

Answer 2

除了 Ajeet 的回答之外，如果您只需要相關鏈接來刷新整個頁面，但又想像單頁應用程序一樣工作，還有另一種方法：

這實際上只是制作使用普通a標簽而不是使用 react-router 來更改路線的 NavLink 的快速版本。 這絕對不包括 NavLink 支持的所有功能，但可以根據需要添加。

import React from "react";
import { useRouteMatch } from "react-router-dom";

export const FakeNavLink = ({
  children,
  to,
  className = "",
  style = {},
  activeClassName = "active",
  basename = "",
  activeStyle = {},
  exact,
  strict
}) => {
  const active = useRouteMatch({ path: to, exact, strict });
  let styleObj = style;
  if (active) {
    styleObj = { ...styleObj, ...activeStyle };
  }
  return (
    <a
      href={basename + to}
      className={className + (active ? ` ${activeClassName}` : "")}
      style={styleObj}
    >
      {children}
    </a>
  );
};

代碼沙盒