0

I'm using <Route /> from react-router-dom for routing and Nav + LinkContainer from react-bootstrap + react-router-bootstrap for navigation:

//...
  <Route path="/shop/" component={Shop} />
//...
  <NavItem caption="Home" path="/" />
  <NavItem caption="Shop" path="/shop" />
//...
    
// with a helper component: 
const NavItem = (props) => {
  return (
    <LinkContainer to={props.path} > 
      <Nav.Link> {props.caption} </Nav.Link> 
    </LinkContainer>
  )
}

This creates an URL with a hash sign in it, e.g.:

http://localhost:3000/#/shop

Where does this come from, what is it good for? Everything is working fine anyway, but this hash sign isn't smart, I think. Can I avoid it?

Bernd
  • 7
  • 4

1 Answers1

0

You can use

BrowserRouter

Instead of

HashRouter

which prevents the showing # on URL.

import {
  BrowserRouter as Router,
  ...
}

instead of

import {
  HashRouter as Router,
  ...
}
Varun Pradhan
  • 587
  • 5
  • 8
  • Yeeaah, works, thanks a lot!! Can you tell me, what HashRouter vs BrowserRouter is about? – Bernd Feb 09 '21 at 11:02
  • Hash Router is used when we use any backend framework template to load react build files and Browser Router is used for normal use when we host backend and frontend seperately. – Varun Pradhan Feb 09 '21 at 11:20