Should I use React Router redirect OR package.json "homepage" property for setting a relat-CodePudding

TL;DR - I want my React app to start with a relative path domain.com/tweets

Hello everyone, I'm creating a React app that fetches tweets from Twitter API.

Because the whole app is just an SPA built in react, I figured it would be wrong to create an empty homepage with a link to navigate to the tweets page, instead of just displaying the tweets right away as the "homepage". Again, currently, displaying tweets is the only thing the app does.

Therefore, I was looking for a way to start my app with the path "/tweets/" right after the domain name.

I know there are two options I can use but I'm not sure which one to use:

package.json "homepage": "/tweets" property
React router Navigate to="/tweets" component

I like the behavior of the redirect more than the package.json homepage option because I don't have a homepage really, it prevents the user from trying to access domain.com and instead redirects them to domain.com/tweets.

What option should I choose? Am I missing anything? Will this give me problems when uploading to production?

Here's my current solution:

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

CodePudding user response：

Using React router is the best and safe option. You can even use redirects to avoid errors in case error occurs. It also helps you to scale further in case you wish to. You don't have to worry about crashes if you have given redirects.

CodePudding user response：

Is your React app ever going to have more than one page? If the answer is no, then I don't see any point in using any routing at all.

The two options I would suggest are:

Use "homepage": "." entry in package.json file so any routes you do use can work relative from where the app is deployed. Deploy your app to a "/tweets" subdirectory on your server. If you decide later you do need to add other pages and routes to the app, specify the basename prop to the router component you choose to use.
```
<BrowserRouter basename="/tweets">
  <Routes>
    <Route path="/" element={<App />}>
      <Route path=":pageNumber" />
    </Route>
  </Routes>
</BrowserRouter>
```

Use "homepage": "." entry in package.json file so any routes used work relative from the app deployment location. Deploy the app to the root directory and handle redirecting to a "/tweets" route.

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

See Building for Relative Paths for more detail.