Should I use React Router redirect OR package.json "homepage" property for setting a relative path as homepage in my React app

user_7609915 0
Viewed 160

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:

  1. package.json "homepage": "/tweets" property
  2. 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.

#EDIT 1
In your answer, please note I'm using React Router V6, as some of the previous features you may know might not be relevant anymore.

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>
EDIT #2 - Here's the updated code
  <BrowserRouter>
    <Routes>
      <Route path="/tweets/:currentPageNumber" element={<App />}/>
      <Route path="/*" element={<Navigate to="/tweets/1" />} />
    </Routes>
  </BrowserRouter>
react-router-dom react-router package.json reactjs
1 Answers

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:

  1. 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>

  2. 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.

user_86908570
Related