ネストルートと動的内のルーティングは、私は、ルーティングの構成以下のいるv4の

Question

ルーター反応します。ここに歴史はありません。

私はこのような構成を使用していた場合：reactjsにおける認証の最良の方法は何ですか

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

：？

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

私のような問題を取得していますか

Answer 1

私はあなたがルーターデザインに反応を見ることができるものから、あなたはコンポーネント自体でルートを指定し、ダイナミックに行うためwithRouterを利用することができ、その場合において反応ルータバージョン4

を使用しているように見えます

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