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';

import Full from './containers/Full/'

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
      <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}/>
), document.getElementById('root'));

Davide Andreazzini

Read more posts by this author.