Bereaksi router dengan kondisi [tertutup]

Komponen reaksi saya terlihat seperti ini:

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

Pertanyaan saya adalah: apakah ada cara yang lebih baik untuk memeriksa kondisi ini dengan react router v4? apakah ini cara terbaik untuk memeriksa kondisi ini? Apakah ini praktik terbaik? Tolong seseorang bantu saya dengan ini!


reactjs javascript redux react-redux react-router
person Dayan    schedule 25.05.2018    source sumber
comment
Kemungkinan duplikat dari Perutean Bersyarat Sederhana di Reactjs   -  person John Samuel    schedule 25.05.2018
comment
terima kasih @johnsam, bagaimana jika saya ingin mengirim rute ke komponen yang berbeda. misalnya, ketika pengguna ada ‹Rute jalur tepat=/ komponen={HomePage} /› dan ketika pengguna tidak ada ‹Rute jalur tepat=/ komponen={DashboardPage} /›?   -  person Dayan    schedule 25.05.2018
comment
selamat coding :D   -  person John Samuel    schedule 25.05.2018
comment
@johnsam, harap Anda mengerti pertanyaannya?   -  person Dayan    schedule 25.05.2018
comment
apakah ini cara yang tepat?   -  person Dayan    schedule 25.05.2018
comment
Dayan. Dalam contoh Anda, Anda bisa menggunakan kondisi ternary dalam kasus Anda. <Route exact path="/" component={this.props.isUserExist ? DashboardPage : HomePage} />. Kasus Anda tidak ada di dalam saklar, dan tidak akan mengikuti aturan fallback terhadap halaman tidak ditemukan untuk pengguna yang masuk. Untuk skenario yang lebih kompleks, periksa jawaban di bawah.   -  person Vlatko Vlahek    schedule 25.05.2018
comment
Tolong teman-teman, jangan pilih pertanyaannya. itu mungkin pertanyaan konyol bagi seseorang, tetapi tidak bagi saya. Saya masih pemula dan berusaha memenuhi tenggat waktu di tempat kerja. Pokoknya terima kasih semuanya atas bantuannya.   -  person Dayan    schedule 26.05.2018

Jawaban (2)


arrow_upward
7
arrow_downward

Dengan cara yang lebih sederhana untuk jalur individual, Anda dapat menggunakan,

<Route exact path="/" component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} />
person Rohith Murali    schedule 25.05.2018
comment
Mengapa harus melakukan hal tersebut? - person Rob; 25.05.2018
comment
Maksud saya, bisa juga dengan cara ini... Kondisinya bisa diberikan sesaat sebelum pemilihan komponen. - person Rohith Murali; 25.05.2018
comment
@RohithMurali Saya mencoba ini tetapi menunjukkan 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. tetapi komponen dirender ketika diteruskan sebagai prop komponen. - person PrivateOmega; 12.07.2019
comment
@PrivateOmega Apakah Anda yakin telah melakukan seperti, component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} dan bukan component={this.props.isUserExist?<HomePage/> : <Dashboard/>}. Karena kesalahannya sendiri mengatakan expected a string or a class/function - person Rohith Murali; 12.07.2019
comment
@RohithMurali ya, pemeriksaan kondisi ada di dalam suatu fungsi. render={() => currentUser.roles.includes('admin') ? <AdminHomePage /> : <UserHomePage />} Saya tidak melihat ada masalah dengan ini. - person PrivateOmega; 12.07.2019
comment
@PrivateOmega render?? - person Rohith Murali; 12.07.2019
comment
Oh sialnya aku tidak menyadari perbedaan besar itu. Jadi apa bedanya?. Terima kasih sobat - person PrivateOmega; 12.07.2019

arrow_upward
4
arrow_downward

Singkatnya, React Router tidak dibuat dengan solusi khusus untuk skenario ini. Ini cukup ringan untuk membiarkan pengembang memutuskan opsi mana yang lebih baik.

Panjang ceritanya, itu tergantung. Jika Anda mengharapkan kode harus memiliki rute umum, yang tidak ada dalam contoh ini, mungkin akan lebih mudah dikelola jika menggunakan Javascript dan operator inline (&&). Misalnya:

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

Dalam lingkup contoh ini, (Dasbor hanya dapat diakses oleh pengguna yang keluar, halaman tidak ditemukan hanya dapat diakses oleh pengguna yang masuk) contoh Anda menunjukkan konsep pengembalian awal, yang merupakan pola yang baik. Ini adalah cara untuk menghindari penulisan else dan memberi sinyal tentang jalur kode utama (yang diautentikasi pengguna) dan jalur kode sesekali (pengguna tidak diautentikasi). Baca selengkapnya tentang pengembalian awal di sini.

Ada juga ide lain seputar hal ini, seperti membuat PrivateRoute kustom Anda sendiri. Contoh ide ini ditunjukkan di sini.

person Karamell    schedule 25.05.2018
comment
@dayan Skenario rute pribadi di sini adalah cara terbaik untuk kasus penggunaan Anda. - person Vlatko Vlahek; 25.05.2018