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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下路由配置：

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

GuaranteeLoggedInContainer为：

import React from 'react';
import { connect } from "react-redux";
class EnsureLoggedInContainer extends React.Component
{
    componentDidMount() {
        if ( !this.props.isLoggedIn )
        {
            // this.props.history.push('/login');
            this.context.router.push('/contact');
        }
    }
    render() {
        // console.log(this.props);
        if ( this.props.isLoggedIn )
        {
            return this.props.children;
        }
        else
        {
            return null;
        }
    }
}
const mapStateToProps = (state,ownProps) => {
    return{
        isLoggedIn : state.isLoggedIn,
        // currentURL : this.props
    }
}
export default connect(mapStateToProps)(EnsureLoggedInContainer);

但是，历史的推动力：this.props.history.push('/login');没有用。这里没有历史。

如果我使用这样的配置：

<Route component={EnsureLoggedInContainer}>
              <Route path='/myjs' component={MyjsPage} />
            </Route>

我遇到类似的问题：

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

reactjs中最好的身份验证方法是什么？

回答：

从我对您的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));

以上是 在React-router v4中嵌套路由和动态路由 的全部内容， 来源链接： utcz.com/qa/428908.html

回到顶部