0

I have local a react app, and using react-router-dom for routing.

The problem: For example, if I navigate to the graphs page, my adress bar is showing the url in the format: http://localhost:8085/#/graphs

How can i get rid of the "#"?

Below is my code, and the routings:

// App.jsx
 <Routes>
      <Route path="/" element={<Login onLogin={handleLogin} />} />
      {isLoggedIn ? (
        <Route path="/" element={<Root onLogout={handleLogout} />}>
          <Route index element={<Home />} />
          <Route path="user-registration" element={<Register />} />
          <Route path="graphs" element={<Graphs/>} />
        </Route>
      ) : null}
    </Routes>


// index.js
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("app")
);

react-router-dom version: ^6.2.1 react version: ^17.0.2

I tried using Browser router, which takes care of the "#", but another problems comes. If im in graphs or any other component, and I refresh the page, I get the error: Cannot GET /dashboard.

raio
  • 67
  • 5
  • 1
    Either you use `HashRouter` and live with the `#` or you setup the server in such a way that every path is redirected to index.html – Konrad Aug 06 '23 at 05:37
  • Could you add a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – 0xts Aug 06 '23 at 06:08
  • 1
    Basically exactly what @Konrad said, it's what you need to do. – Drew Reese Aug 06 '23 at 06:16
  • 1
    @Konrad I understand what you mean, but I think for clarity it's worth mentioning that it's not a redirect per se. The server should not send a `location` header. However, it should emit the index.html regardless of the url. – andrew Aug 06 '23 at 07:19
  • https://serverfault.com/questions/353825/apache-serve-all-urls-on-a-domain-with-the-index-page-without-rewriting-path https://stackoverflow.com/questions/7027636/nginx-send-all-requests-to-a-single-html-page https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing?view=aspnetcore-7.0 – andrew Aug 06 '23 at 07:26
  • Also https://create-react-app.dev/docs/deployment/ might likely have relevant information specific to your hosting service/server environment. – Drew Reese Aug 06 '23 at 07:27

0 Answers0