React history.push() is updating url but not navigating to it in browser

Question

I've read many things about react-router v4 and the npm history library to this point, but none seems to be helping me.

My code is functioning as expected up to the point when it should navigate and do a simple redirect when the url is changed using the history.push() method. The URL IS changing to the specified route, but not doing the redirect on the button push.

I would like for the button push to do a simple redirect without the {forceRefresh:true}, which then reloads the whole page.

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}

Tina Chen · Answer 1 · 2021-07-22T11:10:45.673

75

You shouldn't need to downgrade to v3, React-Router 4.0.0 is totally capable of accomplishing what the OP asked for.

const history = createBrowserHistory();

is a custom history object so you should use <Router> to synchronize it with react-router instead of <BrowserRouter>, which is what I assumed you were using.

Try this instead:

import React, {Component} from 'react';
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }
 
   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

Once your custom history object is passed in via Router's history prop, history.push should work just as expected in anywhere of your app. (you might want to put your history object in a history config file and import it into places where you want to route programmatically).

For more info, see: React Router history object

edited Jul 22 '21 at 11:10

answered Apr 08 '17 at 10:17

Tina Chen

939
1
7
14

15

Wow thank you! This is the only answer I've seen that explains that you need to use `` instead of `` when using the history package. – Chase DeAnda Jul 18 '17 at 15:38
3

This is the most correct solution I found in my search of last 4 days – Abhinav Aug 06 '17 at 07:11
2

Many thanks, history now works with but basename stopped working in it. In basename works but history not working :-( – Jay Nov 07 '19 at 16:04
1

Thanks a lot man. It wasnt working with BrowserRouter but after changing to Router and adding my history as param it worked like a charm – ncesar Mar 18 '21 at 14:22
Excellent Answer, Key reason written for noobs like me – Jatin Garg Sep 10 '21 at 16:28
you might need the `BrowserRouter` for your UI to be easier synced with URL. In that case, the best way is to use `useHistory` and limit the ability to change url to ReactComponent only – Phạm Huy Phát Nov 03 '21 at 08:27
Brilliant answer. – Ali Bayat Mokhtari Dec 24 '22 at 20:12

score 46 · Accepted Answer · answered May 03 '17 at 13:46

46

Check if you don't have nested BrowserRouter tags.

I had this issue on react-router v4 but I solved it after changing the app to only have the BrowserRouter at the top most level like the example below.

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

answered May 03 '17 at 13:46

Artur Carvalho

6,901
10
76
105

3

I have this same problem, but still no solution – Ruan Duarte Oct 04 '20 at 04:28
1

Thanks for the answer. I had several `BrowserRouter` in different modules that make up the entire app. I had to remove `BrowserRouter` tag from all the modules and keep the only one at the App level to have it working successfully. – Ritesh Jagga Feb 09 '22 at 08:29

score 8 · Answer 3 · answered Aug 26 '20 at 18:43

8

Please ensure that you are using

const history = createBrowserHistory({forceRefresh:true});

not

const history = createBrowserHistory();

I was able to update the page once I added "{forceRefresh:true}"

answered Aug 26 '20 at 18:43

Anupam Chaplot

1,134
1
9
22

10

It reloads the entire page I guess this is not the expected bahviour – Traycho Ivanov Sep 18 '20 at 12:34
1

It will also update the state as well as. This is not a correct way – Akash Elhance May 15 '21 at 10:08
You are a lifesaver man, just what I was looking for – SiggeLund Sep 08 '21 at 11:55

score 6 · Answer 4 · answered Nov 18 '19 at 04:20

import Router from react-router-dom not BrowserRouter

// index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    import { Router } from "react-router-dom";
    import history from './utils/history'


    ReactDOM.render(
      <Router history={history}>
        <App />
      </Router>,
      document.getElementById("root"));

    serviceWorker.register();


// history.js 

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

on other components that you need to navigate import history and push

import History from '../utils/history'

History.push('/home')

score 5 · Answer 5 · answered Jul 03 '18 at 05:07

Rendering this would refresh on route change

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

react-router-dom : 4.2.2

score 2 · Answer 6 · answered Sep 19 '22 at 13:34

If you are using strict mode while rendering, Remove it and try again

example:

if your render method look like this

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

change it to this

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(
  <App />,
);

ndufreche · Answer 7 · 2017-03-23T20:56:21.347

0

I have the same problem.

After some search i have found this react-router issue

I have currently downgrade react-router to the v3 and i use browserHistory from the react-router package and it's work fine.

edited Mar 23 '17 at 20:56

answered Mar 23 '17 at 17:32

ndufreche

147
6

Yeah, that's what I did too, I'm planning to stick with v3 for bit now. Thanks! – John Mar 24 '17 at 20:39

score 0 · Answer 8 · answered Jun 17 '21 at 17:55

If you are using functional component then try to push using useHistory Hook.

import React from 'react';
import { useHistory } from "react-router-dom";

export default function Link{

  let history = useHistory();

  onLogout() {
    history.push("/signup");
  }

  return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
}

Abhi Arvension · Answer 9 · 2021-11-19T08:31:05.233

0

you can use

forceRefresh={true}

in you code inside The BrowserRouter or inside Router

edited Nov 19 '21 at 08:31

answered Nov 19 '21 at 08:24

Abhi Arvension

1
2

score 0 · Answer 10 · answered Jan 31 '22 at 17:53

0

in case somebody here with react-router-dom v6

I had the same problem and I had to downgrade to v5

and problem fixed.

answered Jan 31 '22 at 17:53

Ruhith Udakara

2,236
1
18
24

score 0 · Answer 11 · edited Mar 30 '22 at 12:18

0

If you don't want to change router or version you could force the page to reload after updating history.

Eg:

history.push({
    'pathname': '/signup',
    'key': 'value'
})   
document.location.reload()

edited Mar 30 '22 at 12:18

leetbacoon

1,111
2
9
32

answered Mar 29 '22 at 21:20

neethu renjith

1

score 0 · Answer 12 · answered May 17 '22 at 13:22

0

The feature is removed in react-router-dom v6. The best way would be to

Create a state with default value of null and modify that state after async action, then
Create an if statement inside of component that checks state and redirects.
Add an dispatch action that resets the value of state to null

answered May 17 '22 at 13:22

pramod thapa

11
3

please give us some example – aldo Jul 04 '22 at 08:38

score 0 · Answer 13 · answered Jun 03 '22 at 08:03

0

for using history prop, you should use Router imported from "react-router" instead of BrowserRouter imported from "react-router-dom"

then history.push('/home') works as you want.

answered Jun 03 '22 at 08:03

Keval

21
2

React history.push() is updating url but not navigating to it in browser

13 Answers13

Linked