完全没必要在每个Route、Link或者NavLink里重复写${process.env.PUBLIC_URL}，React Router本身就提供了官方推荐的统一配置方案，几步就能彻底解决这个问题：

1. 利用Router组件的basename属性（核心方案） #

不管你用的是React Router v5还是v6，BrowserRouter（或HashRouter）都支持basename属性，直接把process.env.PUBLIC_URL传入即可。它会自动为所有路由、链接加上这个基础路径。

示例（React Router v5）： #

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

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Switch>
        {/* 这里直接写相对路径，不用拼接PUBLIC_URL！ */}
        <Route exact path="/signin" component={SigninPage} />
        <Route exact path="/dashboard" component={DashboardPage} />
      </Switch>
    </Router>
  );
}

示例（React Router v6）： #

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

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/signin" element={<SigninPage />} />
        <Route path="/dashboard" element={<DashboardPage />} />
      </Routes>
    </Router>
  );
}

配置完成后，所有的Link、NavLink都会自动带上基础路径：

// 原本需要写 <Link to={`${process.env.PUBLIC_URL}/signin`} />
// 现在直接写就行，Router会自动拼接
<Link to="/signin">登录</Link>

2. 自定义导航逻辑也能自动适配 #

如果你用useNavigate（v6）或useHistory（v5）做编程式导航，同样不用手动拼接路径，钩子会自动识别basename：

import { useNavigate } from 'react-router-dom';

function SomeComponent() {
  const navigate = useNavigate();

  const goToDashboard = () => {
    // 直接写相对路径，自动带上PUBLIC_URL
    navigate('/dashboard');
  };

  return <button onClick={goToDashboard}>去控制台</button>;
}

额外提示：配合create-react-app的homepage配置 #

别忘了在你的package.json里设置homepage字段，比如部署到子目录/my-app的话：

{
  "homepage": "/my-app"
}

这样create-react-app会自动把process.env.PUBLIC_URL设置为/my-app，build后的产物也会自动适配这个路径，部署时不用额外调整。

内容的提问来源于stack exchange，提问作者Fabrice