What is the difference between BrowserRouter and Router in react-router?

Question

I’m trying to implement basic routing for my application but got stuck with the difference between the BrowserRouter and Router. In my case Router is working properly, BrowserRouter is not routing properly.

I’m using a history object. When the user clicks a button, it needs to be taken to the login page history.push('/login')

const Routing = () => 
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
        </Switch>
    </Router>

Above one work, but if I use BrowserRouter instead of Router it is not working properly.

Answer 1

Simply, they are both to equal each other:

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter>
  <App />
</BrowserRouter>

and

import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

<Router history={history}>
  <App />
</Router>

Answer 2

<BrowserRouter> is a <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

So your routes should be like this,

const Routing = () => <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route path="/login" component={Login} /> </Switch> </BrowserRouter>

For navigation on click of a button you can use Redirect from react-router-dom package.

import { Redirect } from 'react-router-dom'

on click of button,

<Redirect to="/login" />