react一些页面第一次跳转路由,页面内容已经过去了,但路由没变化,接着页面又回来了
这个问题打开新页面只会出现一次,我在表单页提交之后返回列表页,接口一切ok,跳转路由时页面内容已经回到列表,但路由地址没变,然后就看页面内容又回到表单页面了。但之后再点提交啥的都没问题,我所有表单页返回列表都有这个情况,但是旁边的tab菜单或是手写的返回按钮都没事。
你说写的有问题吧,但第二次之后怎么跳转路由都没事,我单独写Link标签或是div标签返回也没事。我感觉应该还是路由哪儿配置有问题。
"react": "^16.4.0",
"react-router": "^4.3.1",
救救我!
//根页面的index.js
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
const { sysDetail,isMobiles } = this.state;
if (isMobiles == '2') {
this.getFontSize()
return (
<div className="main">
<div className="content">
<Routers />
</div>
</div>
);
} else if(isMobiles == '3'){
document.documentElement.style.fontSize = '100px';
return (
<ConfigProvider locale={zh_CN}>
{
sysDetail &&
<div className="main">
<Header sysDetail={sysDetail} />
<div id="content" className="content">
<Routers />
</div>
<Footer sysDetail={sysDetail} />
</div>
}
</ConfigProvider>
);
}else{
return null
}
}
}
ReactDOM.render(
<HashRouter history={hashHistory}>
<Provider store={configureStore()}>
<App />
</Provider>
</HashRouter>,
document.getElementById('App')
);
const routers = [
{
path: '/',
component: importPath({
loader: () => import('pages/home/index.js'),
}),
},
{
path: '/home',
component: importPath({
loader: () => import('pages/home/index.js'),
}),
}
];
const Routers = () => {
return (
<main>
<Switch>
{routers.map(({ component, path, exact }, index) => {
if (path == '/notfound') {
return (<PrivateRoute exact={true} component={component} key={path} replace />);
} else {
return (<PrivateRoute exact={true} path={path} component={component} key={path} />);
}
})}
</Switch>
</main>
)
}
export default Routers;
const routers = [
{
path: '/',
component: importPath({
loader: () => import('pages/home/index.js'),
}),
},
{
path: '/home',
component: importPath({
loader: () => import('pages/home/index.js'),
}),
}
// ......
];
const Routers = () => {
return (
<main>
<Switch>
{routers.map(({ component, path, exact }, index) => {
if (path == '/notfound') {
return (<PrivateRoute exact={true} component={component} key={path} replace />);
} else {
return (<PrivateRoute exact={true} path={path} component={component} key={path} />);
}
})}
</Switch>
</main>
)
}
export default Routers;
class PrivateRoute extends React.Component {
constructor(props) {
super(props);
this.state = {
component: null,
};
}
getComObj = ( Component) => {
const login = localStorage.get('token');
if (login) {
this.setState({
component: <Component />,
})
return;
} else {
message.warning('请登录后进行访问..');
this.setState({
component: <Redirect to={{
pathname: '/login',
}} />,
})
return;
}
}
componentDidMount() {
this.getComObj(this.props.component);
}
render() {
return (
<Route {...this.props} component={()=>this.state.component} />
)
}
}
//表单页
class AddAndUpdate extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.fanhui = React.createRef();
}
handleSubmit = () => {
this.setState({
btnLoading: true,
});
this.props.form.validateFields((err, values) => {
if (!err) {
axiosTrainActivity.updateTrain(values).then((data) => {
this.setState({
btnLoading: false,
});
if (data.data.code == 200) {
this.myRef.current.click()
// this.fanhui.current.click()
// this.fanhuji()
}
})
}
})
};
fanhuji = () => {
this.props.history.push({
pathname: '/trainActivityList',
search: 'pageType=4&module=' + module,
});
}
render() {
return (
<div>
<Link ref={this.myRef} to={'/trainExamineList?pageType=4&module=' + module} >返回</Link>
<div ref={this.fanhui} onClick={this.fanhuji}>返回</div>
<Form {...layout} name="111" onSubmit={_.handleSubmit} >
<Form.Item {...tailLayout}>
<Button disabled={check} loading={btnLoading} type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
</div>
)
}
}
export default Form.create({})(withRouter(AddAndUpdate));
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论