stackjlei
stackjlei

Reputation: 10035

React router not showing browser history

I'm learning from this tutorial but I keep getting this error:

'react-router' does not contain an export named 'browserHistory'.

The file that has react-router is this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

ReactDOM.render(
  <Router history={browserHistory} routes={routes} />, 
  document.getElementById('root')
);

Upvotes: 23

Views: 56003

Answers (6)

Gunjan Kumar
Gunjan Kumar

Reputation: 125

In react-router-dom version 6 useHistory() is replaced by useNavigate() ;

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')
   

If react-router-dom version less than 6

import { useHistory } from "react-router-dom";
const history = useHistory();
history.push('/home')

Upvotes: 0

Rahul Shakya
Rahul Shakya

Reputation: 1425

import browserHistory from "history/createBrowserHistory";

use

const routermiddleware = routerMiddleware(browserHistory());
const history = syncHistoryWithStore(browserHistory(), store);

Upvotes: 0

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

Simple Solution

method 1:

npm install --save history

use this now:

import createHistory from 'history/createBrowserHistory'

method:2

Use Version 3  

npm install react-router@3

Upvotes: 1

DalSoft
DalSoft

Reputation: 11097

You are using version 4 of react-router.

Either downgrade the package or follow the instructions in this SO answer to make it work with v4.

Upvotes: 4

Preview
Preview

Reputation: 35806

You need to get browserHistory from the history module now.

import createHistory from 'history/createBrowserHistory'

Note that they changed the module API recently so if you are using the latest version the import slightly changed:

import { createBrowserHistory } from 'history'

Upvotes: 35

Kv B
Kv B

Reputation: 97

I had the same problem and I wasted a couple of days to figure it out. This error happens simply because react-router v4 does not have the browserHistory (I don't know if that's a good thing or not though). I solved the issue by installing v3 like this:

npm install react-router@3 --save

Upvotes: 8

Related Questions