您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在React-router v4中嵌套路由和动态路由

在React-router v4中嵌套路由和动态路由

从我对您的React Router设计的了解中,您似乎正在使用React Router版本4

在这种情况下,您可以在组件本身中指定路由,并利用withRouter进行动态重定向,例如

return (<div>
        <Router>
          <div>

            <Route path='/login' component={LoginPage}/>
            <EnsureLoggedInContainer/>
          </div>
        </Router>
      </div>
);

import React from 'react';
import { connect } from "react-redux";
import {withRouter} from "react-router";

class EnsureLoggedInContainer extends React.Component
{
    componentDidMount() {
        if ( !this.props.isLoggedIn )
        {
            this.props.history.push('/login');

        }
    }

    render() {
        // console.log(this.props);
        if ( this.props.isLoggedIn )
        {
            return <Route path='/abc' component={abc} />
        }
        else
        {
            return null;
        }
    }


}
const mapStateToProps = (state,ownProps) => {
    return{
        isLoggedIn : state.isLoggedIn,
        // currentURL : this.props
    }
}

export default connect(mapStateToProps)(withRouter(EnsureLoggedInContainer));
其他 2022/1/1 18:14:36 有727人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶