react一些页面第一次跳转路由,页面内容已经过去了,但路由没变化,接着页面又回来了

发布于 2022-09-30 23:08:24 字数 6109 浏览 30 评论 0

这个问题打开新页面只会出现一次,我在表单页提交之后返回列表页,接口一切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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文