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

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://intranet2.cat/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?

CodePudding user response：

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>