Cara Pakai React Router

Asrul Harahap

Asrul Harahap

React Developer

React router dom adalah library yang digunakan untuk react js yang berfungsi mengelola lalu lintas atau rute pada web..

Sebelum memulai lebih lanjut, mari kita install dependensi yang diperlukan.

yarn add react-router-dom

Helper penting pada react-router-dom

  1. BrowserRouter, untuk membungkus sebagai canvas tempat router dijalankan
  2. Switch, untuk menjadikan 404 sebagai hal yang ditampilkan hanya ketika dibutuhkan saja (untuk membungkus Route)
  3. Route, component yang dijalankan sebagai alamat yang dituju
  4. Link, alamat yang akan dituju ini seperti (<a href...)

Cara Pakai React Router Dom

import React, { Component } from 'react'
import {
BrowserRouter,
Switch,
Route,
Link
} from 'react-router-dom'
import Home from './src/Page/Home'
import About from './src/Page/About'
import NotFound from './src/Page/404'
class App extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<nav>
<li> <Link to='/'> Home </Link> </li>
<li> <Link to='/about'> About </Link> </li>
</nav>
<main>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' exact component={About} />
<Route component={NotFound} />
</Switch>
</main>
</React.Fragment>
</BrowserRouter>
)
}
}

Mengirim params dari router

Init params yang akan ditrigger, contoh disini :name

<Route path='/about/:name' exact component={AboutView} />

Init params diterima dalam props dengan nama match, lalu gunakan dengan match.params. + nama init params

function AboutView({ match }) {
return <h2>About {match.params.name} </h2>
}

Router sebagai object

const routes = [{
path: '/',
component: HomePage,
}, {
path: '/Teachers',
component: TeacherListPage,
}, {
path: '/Teachers/:teacherId',
component: TeacherPage,
}, {
path: '/Teachers/:teacherId/Classes',
component: TaughtClassesPage,
}, /* And so on. */];

Pada App.js

class App extends Component {
render() {
const routeComponents = routes.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
return (
<BrowserRouter>
{routeComponents}
</div>
</BrowserRouter>
);
}
}