Postingan lainnya
Reactjs reouter login
mau tanya untuk buat page login, tapi ingin page login ini tidak pakai header, footer dan sidebar seperti page lainnya,soalnya saya buat footer, header dan sidebanya untuk global untuk memisahkan nya bagaimana ya? Terimakasih
1 Jawaban:
Route '/' agan dipake buat nampilin halaman lain juga gak gan? karena route '/' ini kan relative jadinya tergantung agan mau nampilin apps agan kaya gimana.
Kalau mau, bisa bikin gini gan, jadi komponen yang berisi sidebar dll itu ditaruh di komponen yang berbeda dengan komponen Login. Jadi route '/' dipakai buat bikin komponen itu, misalnya kita namakan Dashboard.js.
<pre> <BrowserRouter> <Fragment> <Switch> <Route path="/login" component={Login} /> <Route path="/" component={Dashboard} /> </Switch> </Fragment> </BrowserRouter> </pre>
Perhatikan saya pakai wrapper Switch, ini biar url nya bisa match, import dari react-router-dom juga itu. Lihat urutannya gan, jadi Switch itu ketika nemu '/login' dia gak akan lanjut scan url yang lain. Kalau agan taruh '/' duluan di dalam Switch, maka ketika di halaman '/login', yang akan muncul adalah Dashboard karena '/' nya tidak pakai exact. Tapi kalau agan pakai exact, maka halaman '/home' dll tidak akan muncul. Jadi solusinya pakai Switch dan komponen Login taruh paling atas.
Nah, kemudian di dalam komponen Dashboard agan, baru deh taruh sidebar home dll. Dengan begini, sidebar, header, dan footer gak akan ikut di komponen Login.
<pre> function Dashboard() { return ( <div> <Header /> <SideBar /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> <Footer /> </div> ); } </pre>
Tapi perlu diperhatikan, ketika berada di halaman '/', yang akan muncul ya hanya header, footer, dan sidebar doang. Kalau agan mau halaman '/' itu nampilin Home secara default bisa pakai Redirect, import dari react-router-dom juga, seperti begini:
<pre> function Dashboard() { return ( <div> <Header /> <SideBar /> <Redirect from="/" to="/home" component={Home} /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> <Footer /> </div> ); } </pre>
Kalau pakai Redirect seperti di atas, ketika ada di halaman '/', akan langsung ke halaman '/home'.
