reactjs - 反应 history.push 需要 forceRefresh
问题描述
我已经根据这篇文章实现了 createBrowserHisotry How to get history on react-router v4? ,但是如果我将配置属性设置为 forceRefresh: true,它只会重定向。如果我没有设置任何配置属性,则 url 会更改为推送的 url,但页面不会重定向。为什么?
索引.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();
历史.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);
解决方案
用这个:
this.props.history.push('/index');
this.props.history.go();
推荐阅读
- python - Pygame_widgets 按钮不执行功能
- javascript - 使用 nodemailer 代表某人发送电子邮件
- eclipse - 无法使用与 Gradle 分发的连接来运行分阶段构建操作
- python - PPOAgent + Cartpole = ValueError:actor_network 输出规范与操作规范不匹配:
- elasticsearch - 如何处理保存到结构非常多样化的 Elasticsearch 日志的情况?
- python - 如何在 python 中使用单个 json 命令添加多个表条目?
- javascript - HttpUtility.HtmlEncode() 不适用于某些特殊字符
- flutter - 如何将 onPressed 值发送到另一个小部件 Flutter
- ios - 如何创建斜体和黑色(粗细)UIFont 对象?
- shopify - 如何在shopify液体中隐藏变量操作