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 · Accepted Answer · 2021-07-22 11:10:45Z

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, 2021 at 11:10

answered Apr 8, 2017 at 10:17

Tina Chen

9391 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chase DeAnda Over a year ago

Wow thank you! This is the only answer I've seen that explains that you need to use <Router/> instead of <BrowserRouter/> when using the history package.

Abhinav Over a year ago

This is the most correct solution I found in my search of last 4 days

Jay Over a year ago

Many thanks, history now works with <Router> but basename stopped working in it. In <BrowserRouter> basename works but history not working :-(

ncesar Over a year ago

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

Jatin Garg Over a year ago

Excellent Answer, Key reason written for noobs like me

|

Artur Carvalho · Accepted Answer · 2017-05-03 13:46:39Z

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 3, 2017 at 13:46

Artur Carvalho

7,20511 gold badges80 silver badges116 bronze badges

2 Comments

Ruan Duarte Over a year ago

I have this same problem, but still no solution

Ritesh Jagga Over a year ago

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.

Anupam Chaplot · Accepted Answer · 2020-08-26 18:43:57Z

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, 2020 at 18:43

Anupam Chaplot

1,3541 gold badge12 silver badges23 bronze badges

3 Comments

Traycho Ivanov Over a year ago

It reloads the entire page I guess this is not the expected bahviour

Akash Elhance Over a year ago

It will also update the state as well as. This is not a correct way

SiggeLund Over a year ago

You are a lifesaver man, just what I was looking for

U.A · Accepted Answer · 2019-11-18 04:20:20Z

6

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')

answered Nov 18, 2019 at 4:20

U.A

3,4233 gold badges27 silver badges40 bronze badges

Comments

bathi d · Accepted Answer · 2018-07-03 05:07:33Z

5

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

answered Jul 3, 2018 at 5:07

bathi d

591 silver badge1 bronze badge

Comments

Vishnu · Accepted Answer · 2022-09-19 13:34:13Z

2

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 />,
);

answered Sep 19, 2022 at 13:34

Vishnu

213 bronze badges

Comments

leetbacoon · Accepted Answer · 2022-03-30 12:18:31Z

1

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, 2022 at 12:18

leetbacoon

1,3772 gold badges15 silver badges38 bronze badges

answered Mar 29, 2022 at 21:20

neethu renjith

111 bronze badge

Comments

ndufreche · Accepted Answer · 2017-03-23 20:56:21Z

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, 2017 at 20:56

answered Mar 23, 2017 at 17:32

ndufreche

1476 bronze badges

1 Comment

John Over a year ago

Yeah, that's what I did too, I'm planning to stick with v3 for bit now. Thanks!

santhosh srinivasan · Accepted Answer · 2021-06-17 17:55:44Z

0

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>
      )
}

answered Jun 17, 2021 at 17:55

santhosh srinivasan

4194 silver badges5 bronze badges

Comments

Abhi Arvension · Accepted Answer · 2021-11-19 08:31:05Z

0

you can use

forceRefresh={true}

in you code inside The BrowserRouter or inside Router

edited Nov 19, 2021 at 8:31

answered Nov 19, 2021 at 8:24

Abhi Arvension

12 bronze badges

Comments

Ruhith Udakara · Accepted Answer · 2022-01-31 17:53:23Z

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, 2022 at 17:53

Ruhith Udakara

2,4522 gold badges23 silver badges26 bronze badges

Comments

pramod thapa · Accepted Answer · 2022-05-17 13:22:58Z

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, 2022 at 13:22

pramod thapa

111 silver badge3 bronze badges

1 Comment

aldo Over a year ago

please give us some example

Keval · Accepted Answer · 2022-06-03 08:03:48Z

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 3, 2022 at 8:03

Keval

413 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

7 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

7 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related