反应 history.push 需要 forceRefresh

Posted 2023-02-21

【中文标题】反应 history.push 需要 forceRefresh

【英文标题】：React history.push requiring a forceRefresh

【发布时间】：2019-08-18 07:38:54

【问题描述】：

我已经根据这篇文章How to get history on react-router v4? 实现了 createBrowserHisotry，但是如果我将配置属性设置为 forceRefresh: true，它只会重定向。如果我不设置任何配置属性，则 url 会更改为推送的 url，但页面不会重定向。为什么？

INDEX.JS

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App";
import  Router  from 'react-router-dom'
import registerServiceWorker from "./registerServiceWorker";
import history from "./components/common/History";

ReactDOM.render(<Router history=history><App /></Router>, 
document.getElementById('root'));
registerServiceWorker();

HISTORY.JS

import createBrowserHistory from 'history/createBrowserHistory';

// export default createBrowserHistory(); --> This redirects the ### ### URL 
// but does not physically redirect

export default createBrowserHistory(
//pass a configuration object here if needed
forceRefresh: true
);

APP.JS

class App extends Component 

  render() 
    return (
      <Provider store=store>
        <OidcProvider store=store userManager=userManager>
         <Router>
           <div className="container-fluid">
            <div>
             <Header />
            </div>
           <div>
            <Route exact path="/" render=props => <LoginForm auth=this.auth ...props /> />
            <Route exact path="/callback" render=props => <Callback auth=this.auth ...props /> />
            <Route exact path="/home" render=props => <HomePage ...props /> />
            <Route exact path="/table" render=props => <TableContainer ...props /> />
            <Route exact path="/form/:id" render=props => <FormContainer id=this.props.params.id ...props /> />
            <Route exact path="/form" render=props => <FormContainer ...props /> />
          </div>
          <Footer />
        </div>
      </Router>
    </OidcProvider>
  </Provider>
);



 export default App;

另一个文件调用history.push

import history from "../components/common/History";

class CallbackPage extends React.Component 
render() 
    // just redirect to '/' in both cases
    return (
        <CallbackComponent
            userManager=userManager
            successCallback=() => history.push("/home")
            errorCallback=error => 
                history.push("/");
                console.error(error);
            
        >
            <div>Redirecting...</div>
        </CallbackComponent>
    );
   



export default connect()(CallbackPage);

【问题讨论】：

React router changes url but not view 可能重复

@ShubhamKhatri - 感谢您的建议 - 为了更清晰，我在上面添加了 App.JS 文件。我已经将我的路线指定为确切的路线。我确实注意到您提供的链接准确地位于指定路线的末尾，而不是像我所做的那样开头 - 不过这有关系吗？

默认情况下，React Router 不会导致浏览器导航到新的 url。如果您确实需要导航到新位置，只需使用window.location.href = ...。也尝试使用由 React Router reacttraining.com/react-router/web/api/withRouter 提供的 BrowserRouter 和 history 对象

【参考方案1】：

使用这个：

this.props.history.push('/index');    
this.props.history.go();

【参考方案2】：

您的代码中的问题是您使用了多个路由器组件。您不需要在 index.js 组件中使用 Router。相反，只需在 App 中呈现它并提供自定义历史记录

index.js

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

然后将自定义历史记录作为道具传递

  <Router history=history>
      /* rest of the code */
  </Router>

其中history 是从common/history.js 导入的

【讨论】：

@ShunhamKhatri - 我在路由器中使用历史记录。请参阅上面的 index.js。我是不是误会了？

@rralbritton，好的，所以问题是您正在使用多个路由器。更新了答案