我应该使用 React Router 重定向还是 package.json "homepage" 属性 在我的 React 应用程序中将相对路径设置为主页

Question

TL;DR - 我希望我的 React 应用以相对路径 domain.com/tweets

开始

大家好，我正在创建一个从 Twitter 获取推文的 React 应用程序 API。

因为整个应用程序只是一个内置 React 的 SPA，我认为创建一个带有 link 的空主页以导航到推文页面而不是立即显示推文是错误的作为“主页”。同样，目前，显示推文是该应用程序的唯一功能。

因此，我一直在寻找一种方法来启动我的应用程序，该路径紧跟在域名之后的路径“/tweets/”。

我知道有两个选项我可以使用，但我不确定使用哪个：

1. package.json "主页": "/tweets" 属性
2. React router Navigate to="/tweets" 组件

比起 package.json 主页选项，我更喜欢重定向的行为，因为我确实没有主页，它阻止用户尝试访问 domain.com，而是将他们重定向到域名.com/tweets.

#编辑 1
在您的回答中，请注意我使用的是 React Router V6，因为您可能知道的一些以前的功能可能不再相关。

我应该选择什么选项？我错过了什么吗？这会在上传到生产环境时给我带来问题吗？

这是我目前的解决方案：

  <BrowserRouter>
    <Routes>
      <Route path="/tweets" element={<App />}>
        <Route path=":pageNumber" />
      </Route>
      <Route
        path="*"
        element={<Navigate to="/tweets"/>}
      />
    </Routes>
  </BrowserRouter>

编辑 #2 - 这是更新后的代码

  <BrowserRouter>
    <Routes>
      <Route path="/tweets/:currentPageNumber" element={<App />}/>
      <Route path="/*" element={<Navigate to="/tweets/1" />} />
    </Routes>
  </BrowserRouter>

Answer 1

你的 React 应用程序是否会超过一页？如果答案是否定的，那么我根本看不出使用任何路由有任何意义。

我建议的两个选项是：

1. 在 package.json 文件中使用 "homepage": "." 条目，这样您使用的任何路由都可以相对于部署应用程序的位置起作用。将您的应用程序部署到服务器上的 "/tweets" 子目录。如果您稍后决定确实需要向应用程序添加其他页面和路由，请为您选择使用的路由器组件指定 basename 属性。

   <BrowserRouter basename="/tweets">
     <Routes>
       <Route path="/" element={<App />}>
         <Route path=":pageNumber" />
       </Route>
     </Routes>
   </BrowserRouter>
   

2. 在 package.json 文件中使用 "homepage": "." 条目，这样使用的任何路由都相对于应用程序部署位置起作用。将应用程序部署到根目录并处理重定向到 "/tweets" 路由。

   <BrowserRouter>
     <Routes>
       <Route path="/tweets" element={<App />}>
         <Route path=":pageNumber" />
       </Route>
       <Route path="*" element={<Navigate to="/tweets" replace />} />
     </Routes>
   </BrowserRouter>
   

有关详细信息，请参阅 Building for Relative Paths。