React · Theory

BrowserRouter in React

Theory

57/94

BrowserRouter in React

BrowserRouter uses the real path: /about. HashRouter uses /#/about. Real paths look better and help SEO a bit, but the server must return index.html for unknown paths — otherwise refresh on /about is a 404. That’s the deploy trap.

Vite/Netlify/nginx SPA fallback is the fix. Mention it. Don’t only recite ‘BrowserRouter is better’.

BrowserRouter in React — output — real URL vs hash vs deploy trap. Refresh on /about must not 404.

Diagram

URL /about
      │ BrowserRouter
      ▼
  <Route> → About
      │ Link
      ▼
  no full reload

Exam tip

Real URL + refresh 404 trap.

Example

// BrowserRouter
console.log("BrowserRouter uses /about in the address bar");
console.log("HashRouter would use /#/about");
console.log("Deploy: serve index.html for unknown paths");

BrowserRouter in React — output: real URL vs hash vs deploy trap. Refresh on /about must not 404.

Short notes

DefHTML5 history URLs.
Needserver fallback to index.html.
Alt : HashRouter if you can’t configure the server.

React · Theory

BrowserRouter in React

← All stacks

Theory

57/94

BrowserRouter in React

Vite/Netlify/nginx SPA fallback is the fix. Mention it. Don’t only recite ‘BrowserRouter is better’.

BrowserRouter in React — output — real URL vs hash vs deploy trap. Refresh on /about must not 404.

Diagram

URL /about
      │ BrowserRouter
      ▼
  <Route> → About
      │ Link
      ▼
  no full reload

Exam tip

Real URL + refresh 404 trap.

Example

// BrowserRouter
console.log("BrowserRouter uses /about in the address bar");
console.log("HashRouter would use /#/about");
console.log("Deploy: serve index.html for unknown paths");

BrowserRouter in React — output: real URL vs hash vs deploy trap. Refresh on /about must not 404.

Short notes

DefHTML5 history URLs.
Needserver fallback to index.html.
Alt : HashRouter if you can’t configure the server.

BrowserRouter in React

Example

Short notes

Questions

BrowserRouter in React

Example

Short notes

Questions