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

IT技术 reactjs
2021-04-02 07:23:30

我有以下路由配置：

return (<div>
        <Router>
          <div>

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

确保登录容器是：

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 中最好的身份验证方式是什么？

1个回答

从我对您的 React 路由器设计的了解来看，您似乎使用的是 React 路由器版本 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));
我明天会尝试，如果有效，我会接受作为答案。谢谢你的帮助。
2021-05-22 07:23:30
我里面有多条路线EnsureLoggedInContainer。我可以从中返回多条路线吗？
2021-05-30 07:23:30
你能确保你没有在 abc 组件中重定向吗
2021-06-01 07:23:30
您好，您的解决方案工作正常，但 url 更改为 root，即，当我单击 时localhost/abc，它加载 abc 但 url 更改为localhost. 我想保留它localhost/abc。
2021-06-09 07:23:30
是的，你可以，将它们包裹在一个 div 中
2021-06-18 07:23:30
其它你可能感兴趣的问题
上一篇React + Firestore：从查询中返回一个变量 下一篇如何在地图中访问正确的“this”：ReactJS