Removing the hashbang from react-router navigation

By default, react-router add the annoying and hated hashbang to the URL.

import React from 'react';  
import ReactDOM from 'react-dom';  
import {BrowserRouter, Route, Switch} from 'react-router-dom';

//Container
import Full from './containers/Full/'

//Views
import Login from './views/Pages/Login/'  
import Register from './views/Pages/Register/'  
import Page404 from './views/Pages/Page404/'  
import Page500 from './views/Pages/Page500/'


//Wrap everything in BrowserRouter to remove the hashBang
ReactDOM.render((  
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" name="Login Page" component={Login}/>
      <Route exact path="/register" name="Register Page" component={Register}/>
      <Route exact path="/404" name="Page 404" component={Page404}/>
      <Route exact path="/500" name="Page 500" component={Page500}/>
      <Route path="/" name="Home" component={Full}/>
    </Switch>
  </BrowserRouter>
), document.getElementById('root'));

Davide Andreazzini

Read more posts by this author.