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

user_4741378 0
Viewed 14438

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.

react-router reactjs
5 Answers

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>
user_46614260

<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" />
user_28753480

I think as per my knowledge most of the tutorials and documents use the alias of BrouserRouter as Router otherwise there is nothing specific definition for Router in react-routing its just another name of BrouserRouter and for full explanation you can visit here

user_101473420

Since your configuration is great!.

It must have been the way you are getting your props. I faced a similar problem when I came across this link, guess what was the problem. I'm using functional react component and expecting to get react props in a certain way.

mistake or possible mistake when using functional component

const SignUp = (push) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => push('/feed')}></button>
      </Fragment>

   )
}

push in this sense is not defined (i.e is not a function). it will look like this { push: () => {} }. notice it inside a curly braces {}

Correction

const SignUp = ({ push }) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => push('/feed')}></button>
      </Fragment>

   )
}

// or

const SignUp = (props) => {
   return (
      <Fragment>
        <input type="text" name="email" />
        <button onClick={() => props.push('/feed')}></button>
      </Fragment>

   )
}

Similar mistake in a class component

class SignUp extends Component {
   render() {
      return (
         <Fragment>
           <input type="text" name="email" />
           <button onClick={() => history.push('/feed')}></button>
         </Fragment>

      )
   }
}

Correction

class SignUp extends Component {
   render() {
      return (
         <Fragment>
           <input type="text" name="email" />
           <button onClick={() => this.props.history.push('/feed')}></button>
         </Fragment>

      )
   }
}

if it's beyond that you can check A little bit of history or React Router v4 Unofficial Migration Guide

user_84192450

BrowseRrouter creates a new history and overrides the previous one (just if you are working with nested routes)

user_53602300
Related