Gatsby: <BrowserRouter> ignores the history prop.

Created on 25 Aug 2017  路  11Comments  路  Source: gatsbyjs/gatsby

in the line https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/root.js#L86
<BrowserRouter> ignores the history prop. To use a custom history, use import { Router } instead of import { BrowserRouter as Router }.

UPD: As the result you will get an error You cannot change <Router history>

Most helpful comment

Hi,
the react-router version 4.2

The index.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();

  render() {   

    return (
        <div>
          <BrowserRouter history={history}>
            <Switch>
              <Route exact path="/:lng?" component={App} />
              <Route component={NoMatch} />
            </Switch>
          </BrowserRouter>
        </div>

Error: Warning: <BrowserRouter> ignores the history prop. To use a custom history, useimport { Router }instead ofimport { BrowserRouter as Router }.

All 11 comments

As the result you will get an error You cannot change

Where do you get this error?

@KyleAMathews after a hot reload of a page when page component is changed

Yeah I've been getting it over and over as well

馃憤 great! So dev only but yeah, let's fix this. @3axap4eHko could you create a PR with a fix?

Hi,
the react-router version 4.2

The index.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();

  render() {   

    return (
        <div>
          <BrowserRouter history={history}>
            <Switch>
              <Route exact path="/:lng?" component={App} />
              <Route component={NoMatch} />
            </Switch>
          </BrowserRouter>
        </div>

Error: Warning: <BrowserRouter> ignores the history prop. To use a custom history, useimport { Router }instead ofimport { BrowserRouter as Router }.

Is this fixed or won't be fixed?

It's fixed

how to fixed it?

I get same warning with HashRouter using version 4.2.2 of react-router-dom. Is this fixed for HashRouter as well or only for BrowserRouter?

@zwsf @raeesaa Try updating gatsby.

I'm getting this error as well.
React 16.2
React-router 4.2.2

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timbrandin picture timbrandin  路  3Comments

Oppenheimer1 picture Oppenheimer1  路  3Comments

jimfilippou picture jimfilippou  路  3Comments

benstr picture benstr  路  3Comments

kalinchernev picture kalinchernev  路  3Comments