在 React-router v4 中嵌套路由和动态路由 [英] Nesting routes and dynamically routing in React-router v4

问题描述

我有以下路由配置:

return (
<路由器><div><Route path='/login' component={LoginPage}/><EnsureLoggedInContainer><Route path='/abc' component={abc}/></EnsureLoggedInContainer>
</路由器>

);

EnsureLoggedInContainer 是:

从'react'导入React；从react-redux"导入{连接}；类EnsureLoggedInContainer 扩展了React.Component{componentDidMount() {如果(！this.props.isLoggedIn){//this.props.history.push('/login');this.context.router.push('/contact');}}使成为() {//console.log(this.props);如果( this.props.isLoggedIn ){返回 this.props.children;}别的{返回空；}}}const mapStateToProps = (state,ownProps) =>{返回{isLoggedIn : state.isLoggedIn,//当前URL : this.props}}导出默认连接(mapStateToProps)(EnsureLoggedInContainer)；

但是，历史推送:this.props.history.push('/login'); 不起作用.这里没有历史记录.

如果我使用这样的配置:

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

我遇到如下问题:

警告:你不应该使用<路由组件>和<路由子项>在同一条路线上；<路由子项>将被忽略

reactjs 中最好的身份验证方式是什么?

解决方案

从我看到的你的 React Router Design 来看，你似乎使用的是 React 路由器版本 4

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

return (
<路由器><div><Route path='/login' component={LoginPage}/><EnsureLoggedInContainer/>
</路由器>

);

和

从'react'导入React；从react-redux"导入{连接}；从反应路由器"导入{withRouter}；类EnsureLoggedInContainer 扩展了React.Component{componentDidMount() {如果(！this.props.isLoggedIn){this.props.history.push('/登录');}}使成为() {//console.log(this.props);如果( this.props.isLoggedIn ){return <Route path='/abc' component={abc}/>}别的{返回空；}}}const mapStateToProps = (state,ownProps) =>{返回{isLoggedIn : state.isLoggedIn,//当前URL : this.props}}导出默认连接(mapStateToProps)(withRouter(EnsureLoggedInContainer))；

I have following routing configuration:

return (<div>
        <Router>
          <div>

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

The EnsureLoggedInContainer is:

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);

But, the history push: this.props.history.push('/login'); isn't working. Here history is not present.

If I am using a configuration like this:

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

I am getting issue like:

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

What's the best way of authentication in reactjs?

解决方案

From what I can see of your React Router Design, you seem to be using React router version 4

In that case you can specify the route in the Component Itself, and make use of withRouter to do a dynamic redirect like

return (<div>
        <Router>
          <div>

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

and

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 中嵌套路由和动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！