React Router Dom Problem on Build, im always getting my main page. I already tried with exact

Question

I created my app using create-react-app, installed react-router-dom and in development it was working great. But when i build, i cant navigate. I always get my main page (). I uploaded it to an apache server.

This is my .htaccess:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This is the BrowserRouter:

      <BrowserRouter>
          <GlobalStyle/>
          <NavBar/>
          <Switch>
            <Route path="/agente/:dni">
              <Landing/>
            </Route>
            <Route path="/">
              <ErrorPage/>
            </Route>
          </Switch>
          <Footer/>
      </BrowserRouter>

And my homepage is "https://******/agenda-landing". Agenda-landing is the folder where built product is.

UPDATE:

I now tried with HashRouter and it worked. But i dont like having a '#' in the URL so, any suggestion to make it work with BrowserRouter?

Answer 1

You may check the router's basename prop.

basename

The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

<BrowserRouter basename="/calendar">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

<GlobalStyle/>
<BrowserRouter basename="/agenda-landing"> // <-- add router basename
  <NavBar/>
  <Switch>
    <Route path="/agente/:dni">
      <Landing/>
    </Route>
    <Route path="/">
      <ErrorPage/>
    </Route>
  </Switch>
  <Footer/>
</BrowserRouter>