React Router

  • Post
    React Router

    Routing adalah proses di mana pengguna diarahkan ke halaman yang berbeda berdasarkan tindakan atau permintaan mereka. Router ReactJS terutama digunakan untuk mengembangkan Aplikasi Web Halaman Tunggal. React Router digunakan untuk menentukan beberapa rute dalam aplikasi. Saat pengguna mengetik URL tertentu ke browser, dan jika jalur URL ini cocok dengan ‘rute’ apa pun di dalam file router, pengguna akan diarahkan ke rute tersebut.

    React Router adalah sistem perpustakaan standar yang dibangun di atas React dan digunakan untuk membuat perutean di aplikasi React menggunakan Paket React Router. Ini menyediakan URL sinkron di browser dengan data yang akan ditampilkan di halaman web. Ini memelihara struktur standar dan perilaku aplikasi dan terutama digunakan untuk mengembangkan aplikasi web satu halaman.

    Kebutuhan React Router

    React Router memainkan peran penting untuk menampilkan banyak tampilan dalam satu aplikasi halaman. Tanpa React Router, tidak mungkin menampilkan banyak tampilan di aplikasi React. Sebagian besar situs media sosial seperti Facebook, Instagram menggunakan React Router untuk menampilkan banyak tampilan.

    Instalasi React Router

    React berisi tiga paket berbeda untuk perutean. Ini adalah:

    1. react-router: Ini menyediakan komponen dan fungsi perutean inti untuk aplikasi React Router.
    2. react-router-native: Ini digunakan untuk aplikasi seluler.
    3. react-router-dom: Digunakan untuk desain aplikasi web.

    Tidak mungkin menginstal react-router secara langsung di aplikasi Anda. Untuk menggunakan perutean react, pertama, Anda perlu menginstal modul react-router-dom di aplikasi Anda. Perintah di bawah ini digunakan untuk menginstal react router dom.

    1. $ npm install react-router-dom –save

    Komponen di React Router

    Ada dua jenis komponen router:

    • <BrowserRouter>: Ini digunakan untuk menangani URL dinamis.
    • <HashRouter>: Ini digunakan untuk menangani permintaan statis.

    Contoh

    Langkah-1: Dalam proyek kami, kami akan membuat dua komponen lagi bersama dengan App.js , yang sudah ada.

    About.js

    1. importReact from ‘react’
    2. classAbout extendsComponent {
    3. render() {
    4. return <h1>About</h1>
    5. }
    6. }
    7. export defaultAbout

    Contact.js

    1. importReact from ‘react’
    2. classContact extendsComponent {
    3. render() {
    4. return <h1>Contact</h1>
    5. }
    6. }
    7. export defaultContact

    App.js

    1. importReact from ‘react’
    2. classApp extendsComponent {
    3. render() {
    4. return (
    5. <div>
    6. <h1>Home</h1>
    7. </div>
    8. )
    9. }
    10. }
    11. export defaultApp

    Langkah-2: Untuk Perutean, buka file index.js dan impor ketiga file komponen di dalamnya. Di sini, Anda perlu mengimpor baris: import {Route, Link, BrowserRouter as Router} dari ‘react-router-dom’ yang membantu kita mengimplementasikan Perutean. Sekarang, file index.js kita terlihat seperti di bawah ini.

    Apa itu Route?

    Ini digunakan untuk mendefinisikan dan merender komponen berdasarkan jalur yang ditentukan. Ini akan menerima komponen dan membuat untuk menentukan apa yang harus dirender.

    Index.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ Route, Link, BrowserRouter as Router } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. constrouting = (
    9. <Router>
    10. <div>
    11. <h1>React Router Example</h1>
    12. <Route path=”/”component={App} />
    13. <Route path=”/about”component={About} />
    14. <Route path=”/contact”component={Contact} />
    15. </div>
    16. </Router>
    17. )
    18. render(routing, document.getElementById(‘root’));

    Langkah-3: Buka command prompt , pergi ke lokasi proyek Anda, lalu ketik npm start .

     

    Sekarang, jika Anda masuk secara manual di browser: localhost: 3000 / about , Anda akan melihat Tentang komponen dirender di layar.

     

    Langkah-4: Pada layar di atas, Anda dapat melihat bahwa komponen Home masih dirender. Itu karena jalur utama adalah ‘ / ‘ dan jalur tentang ‘ / tentang ‘, jadi Anda dapat mengamati bahwa garis miring adalah umum di kedua jalur yang merender kedua komponen. Untuk menghentikan perilaku ini, Anda perlu menggunakan prop yang tepat . Itu bisa dilihat pada contoh di bawah ini.

    Index.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ Route, Link, BrowserRouter as Router } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. constrouting = (
    9. <Router>
    10. <div>
    11. <h1>React Router Example</h1>
    12. <Route exact path=”/”component={App} />
    13. <Route path=”/about”component={About} />
    14. <Route path=”/contact”component={Contact} />
    15. </div>
    16. </Router>
    17. )
    18. render(routing, document.getElementById(‘root’));

     

    Menambahkan Navigasi menggunakan komponen Link

    Terkadang, kami ingin membutuhkan banyak tautan dalam satu halaman. Saat kita mengklik salah satu Link tertentu itu, halaman tersebut akan dimuat yang terkait dengan jalur tersebut tanpa memuat ulang halaman web tersebut. Untuk melakukan ini, kita perlu mengimpor komponen <Link> di file index.js .

    Apa itu komponen <Link>?

    Komponen ini digunakan untuk membuat tautan yang memungkinkan untuk menavigasi pada URL yang berbeda dan membuat kontennya tanpa memuat ulang halaman web.

    Contoh

    Index.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ Route, Link, BrowserRouter as Router } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. constrouting = (
    9. <Router>
    10. <div>
    11. <h1>React Router Example</h1>
    12. <ul>
    13. <li>
    14. <Link to=”/”>Home</Link>
    15. </li>
    16. <li>
    17. <Link to=”/about”>About</Link>
    18. </li>
    19. <li>
    20. <Link to=”/contact”>Contact</Link>
    21. </li>
    22. </ul>
    23. <Route exact path=”/”component={App} />
    24. <Route path=”/about”component={About} />
    25. <Route path=”/contact”component={Contact} />
    26. </div>
    27. </Router>
    28. )
    29. render(routing, document.getElementById(‘root’));

     

    Setelah menambahkan Tautan, Anda dapat melihat bahwa rute dirender di layar. Sekarang, jika Anda mengklik About , Anda akan melihat URL berubah dan komponen About ditampilkan.

     

    Sekarang, kita perlu menambahkan beberapa gaya ke Tautan. Sehingga ketika kita mengklik link tertentu, maka dengan mudah dapat diketahui Link mana yang aktif . Untuk melakukan ini react router memberikan trik baru NavLink, bukan Link . Sekarang, di file index.js, ganti Link dari Navlink dan tambahkan properti activeStyle . Properti activeStyle berarti ketika kita mengklik Tautan, itu harus memiliki gaya tertentu sehingga kita dapat membedakan mana yang sedang aktif.

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ BrowserRouter as Router, Route, Link, NavLink } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. constrouting = (
    9. <Router>
    10. <div>
    11. <h1>React Router Example</h1>
    12. <ul>
    13. <li>
    14. <NavLink to=”/”exact activeStyle={
    15. {color:’red’}
    16. }>Home</NavLink>
    17. </li>
    18. <li>
    19. <NavLink to=”/about”exact activeStyle={
    20. {color:’green’}
    21. }>About</NavLink>
    22. </li>
    23. <li>
    24. <NavLink to=”/contact”exact activeStyle={
    25. {color:’magenta’}
    26. }>Contact</NavLink>
    27. </li>
    28. </ul>
    29. <Route exact path=”/”component={App} />
    30. <Route path=”/about”component={About} />
    31. <Route path=”/contact”component={Contact} />
    32. </div>
    33. </Router>
    34. )
    35. render(routing, document.getElementById(‘root’));

    Ketika kita menjalankan program di atas, kita akan mendapatkan layar berikut di mana kita dapat melihat bahwa tautan Beranda berwarna Merah dan satu-satunya tautan yang aktif saat ini .

     

    Sekarang, ketika kita mengklik link Tentang , warnanya hijau yang merupakan link yang sedang aktif .

     

    <Link> vs <NavLink>

    Komponen Link memungkinkan navigasi berbagai rute di situs web, sedangkan komponen NavLink digunakan untuk menambahkan gaya ke rute aktif.

    React Router Switch

    Komponen < Switch > digunakan untuk merender komponen hanya ketika jalur akan cocok . Jika tidak, ia kembali ke komponen yang tidak ditemukan .

    Untuk memahami ini, pertama, kita perlu membuat notfound komponen.

    notfound.js

    1. importReact from ‘react’
    2. constNotfound = () => <h1>Not found</h1>
    3. export defaultNotfound

    Sekarang, impor komponen dalam file index.js. Itu bisa dilihat pada kode di bawah ini.

    Index.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ BrowserRouter as Router, Route, Link, NavLink, Switch } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. importNotfound from ‘./notfound’
    9. constrouting = (
    10. <Router>
    11. <div>
    12. <h1>React Router Example</h1>
    13. <ul>
    14. <li>
    15. <NavLink to=”/”exact activeStyle={
    16. {color:’red’}
    17. }>Home</NavLink>
    18. </li>
    19. <li>
    20. <NavLink to=”/about”exact activeStyle={
    21. {color:’green’}
    22. }>About</NavLink>
    23. </li>
    24. <li>
    25. <NavLink to=”/contact”exact activeStyle={
    26. {color:’magenta’}
    27. }>Contact</NavLink>
    28. </li>
    29. </ul>
    30. <Switch>
    31. <Route exact path=”/”component={App} />
    32. <Route path=”/about”component={About} />
    33. <Route path=”/contact”component={Contact} />
    34. <Route component={Notfound} />
    35. </Switch>
    36. </div>
    37. </Router>
    38. )
    39. render(routing, document.getElementById(‘root’));

    Jika kita memasukkan jalur yang salah secara manual , itu akan memberikan kesalahan tidak ditemukan.

     

    React Router <Redirect>

    Komponen <Redirect> digunakan untuk mengarahkan ke rute lain dalam aplikasi kita untuk mempertahankan URL lama. Itu dapat ditempatkan di mana saja dalam hierarki rute.

    Perutean Bersarang di React

    Perutean bersarang memungkinkan Anda merender sub-rute dalam aplikasi Anda. Hal tersebut dapat dipahami pada contoh di bawah ini.

    Contoh

    index.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. import{ BrowserRouter as Router, Route, Link, NavLink, Switch } from ‘react-router-dom’
    4. import‘./index.css’;
    5. importApp from ‘./App’;
    6. importAbout from ‘./about’
    7. importContact from ‘./contact’
    8. importNotfound from ‘./notfound’
    9. constrouting = (
    10. <Router>
    11. <div>
    12. <h1>React Router Example</h1>
    13. <ul>
    14. <li>
    15. <NavLink to=”/”exact activeStyle={
    16. {color:’red’}
    17. }>Home</NavLink>
    18. </li>
    19. <li>
    20. <NavLink to=”/about”exact activeStyle={
    21. {color:’green’}
    22. }>About</NavLink>
    23. </li>
    24. <li>
    25. <NavLink to=”/contact”exact activeStyle={
    26. {color:’magenta’}
    27. }>Contact</NavLink>
    28. </li>
    29. </ul>
    30. <Switch>
    31. <Route exact path=”/”component={App} />
    32. <Route path=”/about”component={About} />
    33. <Route path=”/contact”component={Contact} />
    34. <Route component={Notfound} />
    35. </Switch>
    36. </div>
    37. </Router>
    38. )
    39. render(routing, document.getElementById(‘root’));

    Di file contact.js , kita perlu mengimpor komponen React Router untuk mengimplementasikan subroute .

    contact.js

    1. importReact from ‘react’
    2. import{ Route, Link } from ‘react-router-dom’
    3. constContacts = ({ match }) => <p>{match.params.id}</p>
    4. classContact extendsComponent {
    5. render() {
    6. const { url } = this.props.match
    7. return (
    8. <div>
    9. <h1>Welcome to Contact Page</h1>
    10. <strong>Select contact Id</strong>
    11. <ul>
    12. <li>
    13. <Link to=”/contact/1″>Contacts 1</Link>
    14. </li>
    15. <li>
    16. <Link to=”/contact/2″>Contacts 2</Link>
    17. </li>
    18. <li>
    19. <Link to=”/contact/3″>Contacts 3</Link>
    20. </li>
    21. <li>
    22. <Link to=”/contact/4″>Contacts 4</Link>
    23. </li>
    24. </ul>
    25. <Route path=”/contact/:id”component={Contacts} />
    26. </div>
    27. )
    28. }
    29. }
    30. export defaultContact

     

    Setelah mengklik link Kontak , kita akan mendapatkan daftar kontak. Sekarang, memilih kontak apa pun, kami akan mendapatkan output yang sesuai. Itu dapat ditunjukkan pada contoh di bawah ini.

     

    Manfaat React Router

    Manfaat dari React Router diberikan di bawah ini:

    • Dalam hal ini, tidak perlu menyetel riwayat browser secara manual.
    • Tautan digunakan untuk menavigasi tautan internal dalam aplikasi. Ini mirip dengan tag jangkar.
    • Ini menggunakan fitur Switch untuk rendering.
    • Router hanya membutuhkan satu elemen Anak.
    • Dalam hal ini, setiap komponen ditentukan didalam

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.