ตอบสนองเราเตอร์ด้วยเงื่อนไข [ปิด]

องค์ประกอบการตอบสนองของฉันมีลักษณะดังนี้:

 class App extends React.Component {  
  render() {
    debugger;
    if(!this.props.isUserExist) {
      return (
        <div>
          <Route exact path="/" component={DashboardPage} />
        </div>
      );
    }
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}

คำถามของฉันคือ: มีวิธีที่ดีกว่าในการตรวจสอบเงื่อนไขเหล่านี้ด้วย react router v4 หรือไม่ นี่เป็นวิธีที่ดีที่สุดในการตรวจสอบเงื่อนไขเหล่านี้หรือไม่? นี่เป็นแนวทางปฏิบัติที่ดีที่สุดหรือไม่? ได้โปรดมีคนช่วยฉันด้วยเรื่องนี้!


reactjs javascript redux react-redux react-router
person Dayan    schedule 25.05.2018    source แหล่งที่มา
comment
การกำหนดเส้นทางแบบมีเงื่อนไขอย่างง่ายใน Reactjs ที่เป็นไปได้   -  person John Samuel    schedule 25.05.2018
comment
ขอบคุณ @johnsam จะเป็นอย่างไรถ้าฉันต้องการส่งเส้นทางไปยังส่วนประกอบอื่น ตัวอย่างเช่น เมื่อผู้ใช้มีอยู่ ‹Route ที่แน่นอน path=/ Component={HomePage} /› และเมื่อผู้ใช้ไม่มีอยู่ ‹Route ที่แน่นอน path=/ ส่วนประกอบ={DashboardPage} /›?   -  person Dayan    schedule 25.05.2018
comment
มีความสุขในการเขียนโค้ด :D   -  person John Samuel    schedule 25.05.2018
comment
@johnsam หวังว่าคุณจะเข้าใจคำถามใช่ไหม   -  person Dayan    schedule 25.05.2018
comment
นี่เป็นวิธีที่ถูกต้องใช่ไหม?   -  person Dayan    schedule 25.05.2018
comment
ดายัน. ในตัวอย่างของคุณ คุณสามารถใช้เงื่อนไขแบบไตรภาคในกรณีของคุณได้ <Route exact path="/" component={this.props.isUserExist ? DashboardPage : HomePage} />. กรณีของคุณไม่อยู่ในสวิตช์ และจะไม่ปฏิบัติตามกฎทางเลือกสำหรับหน้าที่ไม่พบสำหรับผู้ใช้ที่เข้าสู่ระบบ สำหรับสถานการณ์ที่ซับซ้อนมากขึ้น ให้ตรวจสอบคำตอบด้านล่าง   -  person Vlatko Vlahek    schedule 25.05.2018
comment
ได้โปรดอย่าลงคะแนนคำถาม มันอาจเป็นคำถามโง่ๆ สำหรับใครบางคน แต่ไม่ใช่สำหรับฉัน ฉันยังเป็นมือใหม่และพยายามทำงานให้เสร็จตามกำหนดเวลา ยังไงก็ขอบคุณทุกคนที่ช่วยนะครับ   -  person Dayan    schedule 26.05.2018

คำตอบ (2)


arrow_upward
7
arrow_downward

ในวิธีที่ง่ายกว่าสำหรับแต่ละเส้นทาง คุณสามารถไปด้วย

<Route exact path="/" component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} />
person Rohith Murali    schedule 25.05.2018
comment
เหตุใดจึงต้องทำเช่นนั้น? - person Rob; 25.05.2018
comment
ฉันหมายความว่าก็สามารถทำได้ด้วยวิธีนี้เช่นกัน... สามารถระบุเงื่อนไขได้ก่อนการเลือกส่วนประกอบ - person Rohith Murali; 25.05.2018
comment
@RohithMurali ฉันลองสิ่งนี้ แต่มันแสดง Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. แต่ส่วนประกอบได้รับการเรนเดอร์เมื่อส่งผ่านเป็นส่วนประกอบ prop - person PrivateOmega; 12.07.2019
comment
@PrivateOmega คุณแน่ใจหรือว่าคุณได้ทำแบบ component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} ไม่ใช่ component={this.props.isUserExist?<HomePage/> : <Dashboard/>} เพราะข้อผิดพลาดนั้นบอกว่า expected a string or a class/function - person Rohith Murali; 12.07.2019
comment
@RohithMurali ใช่ การตรวจสอบเงื่อนไขอยู่ภายในฟังก์ชัน render={() => currentUser.roles.includes('admin') ? <AdminHomePage /> : <UserHomePage />} ฉันไม่เห็นปัญหาใดๆ เกี่ยวกับเรื่องนี้ - person PrivateOmega; 12.07.2019
comment
@PrivateOmega render?? - person Rohith Murali; 12.07.2019
comment
โอ้ ให้ตายเถอะ ฉันไม่ได้สังเกตเห็นความแตกต่างใหญ่หลวงขนาดนั้น แล้วมันต่างกันยังไงล่ะ.. ขอบคุณเพื่อน - person PrivateOmega; 12.07.2019

arrow_upward
4
arrow_downward

กล่าวโดยสรุป React Router ไม่ได้ถูกสร้างขึ้นด้วยโซลูชันแบบกำหนดเองสำหรับสถานการณ์นี้ มันมีน้ำหนักเบาพอที่จะให้นักพัฒนาตัดสินใจว่าตัวเลือกไหนดีกว่ากัน

เรื่องยาวก็ขึ้นอยู่กับ หากคุณคาดว่าโค้ดจะต้องมีเส้นทางทั่วไป ซึ่งไม่มีในตัวอย่างนี้ อาจมีการบำรุงรักษาได้ดีกว่าหากใช้ Inline Javascript และโอเปอเรเตอร์ (&&) ตัวอย่างเช่น:

class App extends React.Component {  
  render() {
    return (
      <div>
        <Switch>
          {this.props.isUserExist && 
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          }
          <Route exact path="/dashboard" component={DashboardPage} />
          <Route component={NotFoundPage} />
        </Switch>

      </div>
    );
  }
}

ในขอบเขตของตัวอย่างนี้ (แดชบอร์ดสามารถเข้าถึงได้เฉพาะผู้ใช้ที่ออกจากระบบเท่านั้น หน้าที่ไม่พบสามารถเข้าถึงได้เฉพาะผู้ใช้ที่เข้าสู่ระบบ) ตัวอย่างของคุณแสดงให้เห็นถึงแนวคิด การกลับมาก่อนเวลา ซึ่งเป็นรูปแบบที่ดี เป็นวิธีหลีกเลี่ยงการเขียน else และส่งสัญญาณว่าเส้นทางโค้ดหลักคืออะไร (ตรวจสอบสิทธิ์ผู้ใช้) และเส้นทางรหัสเป็นครั้งคราวคืออะไร (ผู้ใช้ไม่ผ่านการตรวจสอบสิทธิ์) อ่านเพิ่มเติมเกี่ยวกับการคืนสินค้าก่อนกำหนดที่นี่

นอกจากนี้ยังมีแนวคิดอื่นๆ เกี่ยวกับเรื่องนี้ เช่น การสร้างแบบกำหนดเองของคุณเอง PrivateRoute ตัวอย่างของแนวคิดนี้แสดงให้เห็นที่นี่

person Karamell    schedule 25.05.2018
comment
@dayan สถานการณ์เส้นทางส่วนตัวที่นี่เป็นวิธีที่ดีเยี่ยมสำหรับการใช้งานของคุณ - person Vlatko Vlahek; 25.05.2018