React history. push()正在更新 URL，但不是在浏览器中导航到它

到目前为止，我已经阅读了许多关于反应路由器 v4和 npm 历史库的内容，但似乎没有一个对我有帮助。

我的代码正在按照预期的方式运行，直到它应该导航并在使用 history. push ()方法更改 URL 时执行一个简单的重定向。URL 正在更改为指定的路由，但不执行按钮按下的重定向。提前感谢，还在学习反应路由器..。

我希望按钮按下做一个简单的重定向没有{ forcRefresh: true } ，然后重新加载整个页面。

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>
)
}
}
97951 次浏览
小开

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.

小开

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

小开
最佳答案

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')
);
小开

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

小开

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

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

小开

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

you can use

forceRefresh={true}

in you code inside The BrowserRouter or inside Router

小开

in case somebody here with react-router-dom v6

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

and problem fixed.

小开

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()
小开

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

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

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.

小开

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

提交答案