Dokumentasi React Router (Web)

v5.3.0 bahasa Indonesia

Diterjemahakan dari https://reactrouter.com/web/

Diterjemahkan oleh @hari_kun

 Daftar Isi
Quick Start ..................................................................................................................................................... 0

Installation ................................................................................................................................................ 0

1st Example: Basic Routing............................................................................................................. 0

2nd Example: Nested Routing ..................................................................................................... 2

Keep Going! ............................................................................................................................................. 4

Primay Components .............................................................................................................................. 5

Routers ........................................................................................................................................................ 5

Router Matchers ................................................................................................................................... 6

Navigation (or Router Changers)............................................................................................. 7

Server Rendering ...................................................................................................................................... 9

Adding app specific context information......................................................................... 10

404, 401, or any other status ........................................................................................................ 11

Putting it all together ........................................................................................................................ 12

Data Loading ......................................................................................................................................... 13

Code Splitting............................................................................................................................................ 15

Code Splitting and Server-Side Rendering ..................................................................... 16

Scroll Restoration ..................................................................................................................................... 17

Scroll to top ............................................................................................................................................. 17

Generic Solution ................................................................................................................................. 19

Philosophy .................................................................................................................................................... 21

Static Routing ........................................................................................................................................ 21

BackStory.................................................................................................................................................22

Dynamic Routing .............................................................................................................................. 23

Nested Routes ..................................................................................................................................... 24

Responsive Routes ........................................................................................................................... 25

Testing ........................................................................................................................................................... 29

Context ..................................................................................................................................................... 29

i
 Starting at specific routes .......................................................................................................... 30

Navigating ............................................................................................................................................. 30

Checking location in tests .......................................................................................................... 32

React Testing Library ...................................................................................................................... 33

Deep Redux Integration .................................................................................................................... 34

Static Routes ............................................................................................................................................. 35

Hooks.............................................................................................................................................................. 36

useHistory............................................................................................................................................... 36

useLocation .......................................................................................................................................... 36

useParams .............................................................................................................................................37

useRouteMatch .................................................................................................................................. 38

<BrowserRouter> .................................................................................................................................... 40

basename: string ............................................................................................................................. 40

getUserConfirmation: func......................................................................................................... 40

forceRefresh: boolean ................................................................................................................... 40

keyLength: number ........................................................................................................................... 41

Children: node...................................................................................................................................... 41

<HashRouter> ........................................................................................................................................... 42

basename: string ............................................................................................................................. 42

getUserConfirmation: function................................................................................................ 42

hashType: string ................................................................................................................................ 43

Children: node..................................................................................................................................... 43

<Link> .............................................................................................................................................................. 44

to: string ................................................................................................................................................... 44

to: object ................................................................................................................................................. 44

to: function............................................................................................................................................. 44

replace: boolean ............................................................................................................................... 45

innerRef: function .............................................................................................................................. 45

ii
 innerRef: RefObject .......................................................................................................................... 45

component: React.Component .............................................................................................. 46

Others ....................................................................................................................................................... 46

<NavLink> ..................................................................................................................................................... 47

activeClassName: string ............................................................................................................. 47

activeStyle: object ............................................................................................................................ 47

exact: boolean .................................................................................................................................... 47

strict: boolean ..................................................................................................................................... 48

isActive: function ............................................................................................................................... 48

location: object................................................................................................................................... 48

aria-current: string .......................................................................................................................... 48

<Prompt> ..................................................................................................................................................... 50

<MemoryRouter> ..................................................................................................................................... 51

initialEntries: array ............................................................................................................................. 51

initialIndex: number.......................................................................................................................... 51

getUserConfirmation: function................................................................................................. 51

keyLength: number ........................................................................................................................... 51

Children: node..................................................................................................................................... 52

<Redirect> ................................................................................................................................................... 53

to String ................................................................................................................................................... 53

to: object ................................................................................................................................................. 53

push: boolean ..................................................................................................................................... 53

from: string ............................................................................................................................................ 54

exact: boolean .................................................................................................................................... 54

sensitive: boolean............................................................................................................................. 55

<Route> ......................................................................................................................................................... 56

Route render methods. ................................................................................................................. 57

Route props .......................................................................................................................................... 57

iii
 component ........................................................................................................................................... 57

render: function.................................................................................................................................. 58

children: function .............................................................................................................................. 59

path: string | string[] ....................................................................................................................... 60

exact: boolean ..................................................................................................................................... 61

strict: boolean ...................................................................................................................................... 61

location: object................................................................................................................................... 62

sensitive: boolean............................................................................................................................. 62

<Router> ....................................................................................................................................................... 63

history: object ...................................................................................................................................... 63

Children: node..................................................................................................................................... 64

<StaticRouter> .......................................................................................................................................... 65

basename: string ............................................................................................................................. 66

location: string .................................................................................................................................... 66

location: object................................................................................................................................... 66

context: object .................................................................................................................................... 66

Children: node..................................................................................................................................... 67

<Switch> ....................................................................................................................................................... 68

location: object................................................................................................................................... 69

children: node ..................................................................................................................................... 70

generatePath ............................................................................................................................................. 71

pattern: string ........................................................................................................................................ 71

Params: object...................................................................................................................................... 71

History ............................................................................................................................................................. 72

History is mutable..............................................................................................................................73

Location ........................................................................................................................................................ 74

Match ............................................................................................................................................................. 76

null matches ........................................................................................................................................ 76

iv
matchPath ................................................................................................................................................. 78

pathname .............................................................................................................................................. 78

props ......................................................................................................................................................... 78

returns ...................................................................................................................................................... 78

withRouter................................................................................................................................................... 80

Component.WrappedComponent........................................................................................ 81

wrappedComponentRef: function ......................................................................................... 81

v
Dokumentasi React Router Dom Web

https://reactrouter.com/web/

Quick Start
Untuk memulai dengan React Router di sebuah aplikasi web, anda akan
perlu sebuah aplikasi React web. Jika anda perlu untuk membuatnya.
Kami merekomendasikan anda mencoba Create React App. Create React
App adalah sebuah alat populer yang bekerja sangat baik dengan React
Router.

Pertama, pasang (install) `create-react-app` dan buat sebuah proyek

baru dengannya.

npx create-react-app demo-app

cd demo-app

Installation
Anda dapat install React Router dari the public npm registry dengan npm
atau yarn. Karena kita membangun sebuah aplikasi web, kita akan
menggunakan `react-router-dom` di panduan ini.

npm install react-router-dom

lalu, salin / tempel salah satu dari contoh berikut ke dalam `src/App.js`.

1st Example: Basic Routing

Pada contoh ini kita memiliki 3 “pages” yang ditangani oleh router: sebuah
halaman home, sebuah halaman about, dan sebuah halaman user. Saat
anda klik pada `<Link>` yang berbeda, router render <Route> yang cocok.

Catatan: Dibelakang layar sebuah `<Link>` render sebuah `<a>` dengan

sebuah `href` asli, jadi orang-orang menggunakan papan ketik (keyboard)
atau pembaca layar (screen readers) tetap dapat menggunakan aplikasi
ini.

import React from "react";

import {
BrowserRouter as Router,
Switch,
Route,
0
 Link
} from "react-router-dom";

export default function App() {

return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>

{/* <Switch> melihat melalui anak-anaknya <Route> dan

me-renders pertama yang cocok dengan URL saat ini. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}

function Home() {
return <h2>Home</h2>;
}

function About() {
return <h2>About</h2>;
}

function Users() {

1
 return <h2>Users</h2>;
}

2nd Example: Nested Routing

Contoh ini menunjukkan cara routing bersarang. Route `/topics` memuat
komponen `Topics`, yang me-render lebih jauh `<Route>` yang bergantung
pada paths nilai :id.

import React from "react";

import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch,
useParams
} from "react-router-dom";

export default function App() {

return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>

<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/topics">
<Topics />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}

function Home() {

2
 return <h2>Home</h2>;
}

function About() {
return <h2>About</h2>;
}

function Topics() {
let match = useRouteMatch();

return (
<div>
<h2>Topics</h2>

<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>

{/* halaman Topics memiliki <Switch> sendiri dengan route lebih

yang dibangun pada /topics URL path. Anda bisa pikir
<Route> kedua disini sebagai halaman "index" untuk semua topics, atau
atau halaman yang ditampilkan ketika tidak ada topic yang dipilih */
}
<Switch>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={match.path}>
<h3>Please select a topic.</h3>
</Route>
</Switch>
</div>
);
}

function Topic() {
let { topicId } = useParams();
return <h3>Requested topic ID: {topicId}</h3>;
}

3
Keep Going!
Semoga contoh ini memberi anda sebuah rasa seperti apa nampaknya
membuat sebuah aplikasi web dengan React Router. Lanjutkan membaca
lebih banyak tentang komponen utama di React Router!.

4
Primay Components
Ada tiga jenis komponen utama di React Router:

 Routers, seperti `<BrowserRouter>` dan `<HashRouter>`

 Pencocok router, seperti `<Route>` dan `<Switch>`
 dan navigasi, seperti `<Link>`, `<NavLink>`, dan `<Redirect>`

Kami juga suka berpikir komponen navigasi sebagai “pengubah rute”.

Semua komponen yang anda gunakan di sebuah aplikasi web harus telah
diimpor dari `react-router-dom`.

import { BrowserRouter, Route, Link } from "react-router-dom";

Routers
Pada intinya semua aplikasi React Router harus menjadi sebuah
komponen router. Untuk proyek web, `react-router-dom` menenyediakan
router `<BrowserRouter>` dan `<HashRouter>`. Perbedaan utama antara
keduanya adalah cara mereka menyimpan URL dan
mengkomunikasikannya dengan peladen (server) web anda.

 Sebuah <BrowserRouter> menggunakan URL paths regular. Ini

umumnya adalah URL yang paling tampan. Tapi mereka perlu server
anda untuk dikonfigurasi dengan benar. Khususnya, web server
anda butuh untuk menyajikan halaman yang sama pada semua
URL yang diatur client-side oleh React Router. `Create React App`
mendukung `out of the box` ini di development dan datang dengan
instruksi pada bagaimana cara konfigurasi server production anda.
 Sebuah `<HashRouter> menyimpan lokasi saat ini dibagian hasi dari
URL, jadi URL tampak seperti http://example.com/#/your/page.
Karena hash tidak pernah mengirim ke server, ini berarti tidak ada
konfigurasi khusus yang diperlukan.

Untuk menggunakan sebuah router, pastikan dirender pada akar (root)

hirarki element anda. Khususnya anda akan membungkus top-level
element <App> dalam sebuah router. Seperti ini:

import React from "react";

5
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
return <h1>Hello React Router</h1>;
}

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);

Router Matchers
Ada dua komponen pencocok route: `Switch` dan `Route`. Ketika sebuah
<Switch> dirender, <Swtich> mencari melalui semua elemen anak <Route>`
untuk menemukan path mana yang cocok dengan URL saat ini. Ketika
<Switch> menemukannya, dia akan me-render <Route> tersebut dengan
path khusus (biasanya lebih lama) sebelum yang kurang-khusus.

Jika tidak ada <Route> yang cocok, <Switch> tidak merender apapun (null).

import React from "react";

import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";

function App() {
return (
<div>
<Switch>
{/* jika URL saat ini adalah /about, route ini akan dirender
sementara sisanya tidak dipedulikan*/}
<Route path="/about">
<About />
</Route>

{/* perhatikan dua urutan route. yang lebih khusus

path="/contact/:id" datang sebelum path="/contact" jadi
route akan render ketika menampilkan invidual contact */}
<Route path="/contact/:id">
<Contact />
6
 </Route>
<Route path="/contact">
<AllContacts />
</Route>

{/* Jika tidak ada rute sebelumnya yang merender apa pun,
route akan menjadi sebuah fallback.

Penting: route dengan path="/" akan *selalu* cocok

dengan URL karena semua URLs dimulai dengan /. iutlah
alasan kita menempatkan ini diakhir dari semuanya */}
<Route path="/">
<Home />
</Route>
</Switch>
</div>
);
}

ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
Satu hal penting yang perlu dicatat bahwa sebuah <Route path> cocok
dengan awalan dari URL, bukan semuanya. Jadi sebuah <Route path="/">
akan selalu cocok dengan URL. Karena itu, kita biasanya menempatkan
<Route> ini diakhir dari `<Switch>` kita. Solusi lain yang mungkin adalah
menggunakan `<Route exact path="/">` yang akan melakukan
pencocokan dengan seluruh URL.

Catatan: meskipun React Router mendukung rendering element <Route>

diluar dari <Swtich>, pada versi 5.1 kami merekomendasikan anda
sebaiknya menggunakan hook `useRouteMatch`. Selain itu, kami tidak
merekomendasikan anda me-render sebuah <Route> tanpa sebuah path
dan sebaliknya anda menggunakan sebuah hook untuk mendapat akses
ke variable apapun yang anda butuhkan.

Navigation (or Router Changers)

React Router menyediakan sebuh komponen <Link> untuk membuat
tautan (link) di aplikasi anda. Kapanpun anda me-render sebuah <Link>,
sebuah jangkar (<a>) akan di render pada document HTML anda.

7
<Link to="/">Home</Link>
// <a href="/">Home</a>
<NavLink> adalah tipe khusus dari <Link> yang dapat bergaya sendiri
sebagai “active” ketika props `to` cocok dengan lokasi saat ini.

<NavLink to="/react" activeClassName="hurray">

React
</NavLink>

// saat URL adalah /react, ini me-render:

// <a href="/react" className="hurray">React</a>

// ketika sesuatu yang lain:

// <a href="/react">React</a>
Kapanpun saat anda ingin memaksa navigasi, anda dapat me-render
sebuah <Redirect>. Ketika sebuah <Redirect> dirender, dia akan
menavigasi menggunakan props `to`.

<Redirect to="/login" />

8
Server Rendering
Rendering di server sedikit berbeda karena semuanya tanpa state
(stateless). Ide dasarnya adalah kita membungkus sebuah aplikasi di
dalam sebuah <StaticRouter> stateless alih-alih sebuah <BrowserRouter>.
Kita mengopernya didalam requested url dari server jadi routes akan
cocok dan sebuah props `context` yang akan kita bahas nanti.

// client
<BrowserRouter>
<App/>
</BrowserRouter>

// server (bukan cerita lengkapnya)

<StaticRouter
location={req.url}
context={context}
>
<App/>
</StaticRouter>
Ketika anda me-render sebuah <Redirect> di client, browser history
mengubah state dan kita dapat layar baru. Dalam sebuah environment
server statis kita tidak dapat mengubah state aplikasi. Sebaliknya, kita
menggunakan prop `context` untuk menemukan hasil render sebelumnya.
Jika kita menemukan sebuah `context.url`, lalu kita tahu aplikasi dialihkan
(redirect). Ini mungkinkan kita untuk mengirim sebuah redirect dari server.

const context = {};

const markup = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);

if (context.url) {
// pada suatu tempat sebuah `<Redirect>` telah dirender
redirect(301, context.url);
} else {
// kami baik-baik saja, kirim response
}

9
Adding app specific context information
Router hanya pernah menambahkan `context.url`. tapi anda mungkin ingin
beberapa redirect menjadi ke 301 dan lainnya ke 302. Atau mungkin anda
ingin untuk mengirim sebuah response 404 jika beberapa cabang
(branch) khusus dari UI (user interface) dirender, atau sebuah 401 jika
mereka tidak memiliki otoriasasi. Prop context milik anda, jadi anda dapat
mengubahnya. Ini adalah cara untuk membedakan antara redirect 301
dan 301:

function RedirectWithStatus({ from, to, status }) {

return (
<Route
render={({ staticContext }) => {
// tidak ada `staticContext` di client, jadi
//jadi kita perlu menjaganya disini
if (staticContext) staticContext.status = status;
return <Redirect from={from} to={to} />;
}}
/>
);
}

// suatu tempat di aplikasi anda

function App() {
return (
<Switch>
{/* beberapa routes lain*/}
<RedirectWithStatus status={301} from="/users" to="/profiles" />
<RedirectWithStatus
status={302}
from="/courses"
to="/dashboard"
/>
</Switch>
);
}

// di server
const context = {};

const markup = ReactDOMServer.renderToString(

<StaticRouter context={context}>
<App />
</StaticRouter>
);

10
if (context.url) {
// kita menggunakan `context.status` yang
//kita tambahkan di RedirectWithStatus
redirect(context.status, context.url);
}

404, 401, or any other status

Kita dapat melakukan hal yang sama seperti diatas. Membuat sebuah
komponen yang menambahkan beberapa context dan me-rendernya
dimanapun di aplikasi untuk mendapatkan status kode yang berbeda.

function Status({ code, children }) {

return (
<Route
render={({ staticContext }) => {
if (staticContext) staticContext.status = code;
return children;
}}
/>
);
}
Kini anda dapat me-render sebuah `Status` dimanapun didalam aplikasi
yang anda ingin untuk menambahkan kode ke `staticContext`.

function NotFound() {
return (
<Status code={404}>
<div>
<h1>Sorry, can’t find that.</h1>
</div>
</Status>
);
}

function App() {
return (
<Switch>
<Route path="/about" component={About} />
<Route path="/dashboard" component={Dashboard} />
<Route component={NotFound} />
</Switch>
);
}

11
Putting it all together
Ini bukan sebuah aplikasi nyata, tapi ini menunjukkan bagian umum yang
anda akan butuhkan untuk menempatkan semuanya bersama.

import http from "http";

import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom";

import App from "./App.js";

http
.createServer((req, res) => {
const context = {};

const html = ReactDOMServer.renderToString(

<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);

if (context.url) {
res.writeHead(301, {
Location: context.url
});
res.end();
} else {
res.write(`
<!doctype html>
<div id="app">${html}</div>
`);
res.end();
}
})
.listen(3000);
Dan kemudia di client:

import ReactDOM from "react-dom";

import { BrowserRouter } from "react-router-dom";

import App from "./App.js";

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("app")
);
12
Data Loading
Ada banyak pendekatan berbeda untuk melakukan pemuatan (loading)
data, dan belum ada praktik terbaik yang jelas. Jadi kita mencari yang
bisa di komposisi dengan pendekatan apapun, dan tidak menentukan
atau condong ke arah satu dengan lainnya. Kami percaya router dapat
cocok didalam batasan aplikasi anda.

Batasan utama adalah anda ingin memuat data sebelum anda me-
render. React Router mengekspor fungsi statis `matchPath` yang
digunakan secara internal untuk mencocokkan lokasi dengan route. Anda
dapat menggunakan fungsi ini di server untuk membantu menentukan
apa data depencencies anda yang akan ada sebelum rendering.

Inti pendekatan ini bergantung pada sebuah konfigurasi route statis yang
digunakan ke keduanya me-render route anda dan mencocokkannya
sebelum rendering untuk menentukan data depencencies.

const routes = [
{
path: "/",
component: Root,
loadData: () => getSomeData()
}
// dan lain-lain.
];
Kemudian menggunakan konfigurasi ini untuk me-render route anda di
aplikasi:

import { routes } from "./routes.js";

function App() {
return (
<Switch>
{routes.map(route => (
<Route {...route} />
))}
</Switch>
);
}
Lalu pada server anda memiliki sesuatu seperti:

import { matchPath } from "react-router-dom";

// didalam sebuah request

13
const promises = [];
// gunakan `some` untuk meniru perilaku `<Switch>` memilih hanya
// pertama yang cocok
routes.some(route => {
// gunakan `matchPath` disini
const match = matchPath(req.path, route);
if (match) promises.push(route.loadData(match));
return match;
});

Promise.all(promises).then(data => {
// lakukan sesuatu dengan data sehingga client
//dapat mengaksesnya kemudian render aplikasi
});
Dan akhirnya, client butuh mengambil data. Lagi, kita tidak berurusan
dengan menentukan sebuah pola muat data untuk aplikasi anda, tapi ini
adalah titik sentuh yang anda perlu untuk menerapkannya.

Anda mungkin tertarik dengan package React Router Config anda untuk
membantu muat data dan rendering server dengan konfigurasi route
statis.

14
Code Splitting
Satu fitur hebat dari web adalah kita tidak harus membuat pengunjung
kita mengunduh seluruh aplikasi sebelum mereka menggunakannya.
Anda dapat berpikir pemisah kode (code splitting) sebagai mengunduh
aplikasi bertahap. Untuk mencapai ini kita akan menggunakan
webpack, @babel/plugin-syntax-dynamic-import, dan loadable-
components.

Webpack memiliki dukungan bawaan untuk import dinamis; meskipun, jika

anda menggunakan Babel (contoh untuk meng-compile JSX ke
JavaScript) lalu anda akan butuh untuk menggunakan plugin
@babel/plugin-syntax-dynamic-import . Ini hanya plugin syntax,
maksutnya Babel tidak melakukan perubahan apapun. Plugin
sederhananya memungkinkan Babel untuk mengurai (parse) impor
dinamis jadi webpack dapat membundlenya sebagai sebuah kode
terpisah (split). `.babelrc` anda harus tampak seperti berikut ini:

{
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
loadable-components adalah sebuah library untuk memuat komponen
dengan impor dinamis. Library ini menangani semua macam kasus
secara otomatis dan membuat code splitting menjadi sederhana! Ini
adalah sebuah contoh cara menggunakan loadable-components:

import loadable from "@loadable/component";

import Loading from "./Loading.js";

const LoadableComponent = loadable(() => import("./Dashboard.js"), {

fallback: <Loading />
});

export default class LoadableDashboard extends React.Component {

render() {
return <LoadableComponent />;
}
}
Itu saja!. Sederhana gunakan LoadableDashboard (atau apapun nama
komponen anda) dan LoadableDashboard akan secara otomatis memuat
dan me-render ketika anda menggunakannya di aplikasi anda. `fallback`

15
adalah sebuah komponen placeholder untuk ditampilkan saat komponen
nyata sedang dimuat.

Documentasi penuh tersedia di sini.

Code Splitting and Server-Side Rendering

loadable-components termasuk sebuah panduan untuk server-side
rendering.

16
Scroll Restoration
Pada React Router versi terdahulu kami menyediakan dukungan out-of-
the-box untuk pemulihan gulir (scroll restoration) dan orang-orang telah
memintanya sejak saat itu. Mudah-mudahan dokumen ini membantu
anda mendapat apa yang anda butuh dari scroll bar dan routing!

Browser memulai untuk menangani scroll restoration dengan

`history.pushState` di mereka sendiri dengan cara yang sama. Mereka
menanganinya dengan navigasi browser normal. Perilaku ini telah
berfungsi dengan chrome dan sangat bagus. Ini adalah spesifikasi Scroll
Restoration.

Karena browser memulai untuk menangani “default case” dan aplikasi

memiliki scrolling bervariasi!. Kita tidak mengirim dengan manajemen
scroll bawaan. Panduan ini harusnya membantu anda menerapakan
apapun scrolling yang anda butuhkan.

Scroll to top
Kebanyakan semua yang anda butuhkan adalah “gulir ke atas” karena
anda memiliki halaman konten yang panjang, yang saat dinavigasi, tetap
gulir kebawah. Ini jelas untuk menangani dengan komponen <ScrollToTop>
yang akan menggulir window keatas setiap navigasi:

import { useEffect } from "react";

import { useLocation } from "react-router-dom";

export default function ScrollToTop() {

const { pathname } = useLocation();

useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);

return null;
}
Jika anda belum menjalakan React 16.8, anda dapat melakukan hal
serupa dengan sebuah subclass `React.Component`:

mport React from "react";

import { withRouter } from "react-router-dom";

class ScrollToTop extends React.Component {

17
 componentDidUpdate(prevProps) {
if (
this.props.location.pathname !== prevProps.location.pathname
) {
window.scrollTo(0, 0);
}
}

render() {
return null;
}
}

export default withRouter(ScrollToTop);

lalu me-rendernya di atas aplikasi anda, tapi dibawah Router

function App() {
return (
<Router>
<ScrollToTop />
<App />
</Router>
);
}
Jika anda memiliki sebuah tab antarmuka (interface) tersambung ke
router, lalu anda mungkin tidak ingin gulir ke atas ketika browser menukar
tabs. Alih-alih, bagaimana tentang sebuah <ScrollToTopOnMount> di
tempat khusus yang anda butuhkan?

import { useEffect } from "react";

function ScrollToTopOnMount() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

return null;
}

// Render ini dimanapun menggunakan:

// <Route path="..." children={<LongContent />} />
function LongContent() {
return (
<div>
<ScrollToTopOnMount />

<h1>Here is my long content page</h1>

<p>...</p>
18
 </div>
);
}
Lagi, jika anda belum menggunakan React 16.8, anda dapat melakukan
hal serupa dengan sebuah subclass `React.Component`:

import React from "react";

class ScrollToTopOnMount extends React.Component {

componentDidMount() {
window.scrollTo(0, 0);
}

render() {
return null;
}
}

// Render ini dimanapun menggunakan:

// <Route path="..." children={<LongContent />} />
class LongContent extends React.Component {
render() {
return (
<div>
<ScrollToTopOnMount />

<h1>Here is my long content page</h1>

<p>...</p>
</div>
);
}
}

Generic Solution
Untuk sebuah solusi umum (dan apa yang browser mulai untuk diterapkan
secara native) kita membicaran tentang dua hal:

1. Gulir ke atas di navigasi jadi anda tidak memulai sebuah halaman

baru yang bergulir ke bawah
2. Memulihkan posisi gulir window dan overflow elemen di klik “back”
dan “forward” (tapi tidak klik Link)

Disatu titik kita ingin mengirim ke API umum. Ini adalah apa yang kita tuju:

19
<Router>
<ScrollRestoration>
<div>
<h1>App</h1>

<RestoredScroll id="bunny">
<div style={{ height: "200px", overflow: "auto" }}>
I will overflow
</div>
</RestoredScroll>
</div>
</ScrollRestoration>
</Router>
Pertama, `ScrollRestoration` akan menggulir window ke atas pada navigasi.
Kedua, ` ScrollRestoration` akan menggunakan `location.key` untuk
menyimpan posisi gulir window dan posisi gulir dari komponen
`RestoredScroll` ke `sessionStorage`. Lalu, ketika komponen
`ScrollRestoration` atau `RestoredScoll` mount. Mereka akan melihat ke
posisi mereka dari `sessionStorage`.

Bagian yang sulit adalah menentukan API `opt-out` ketika anda tidak ingin
gulir window diatur. Contoh, jika anda memiliki beberapa tab navigasi
mengambang didalam konten dari halaman anda anda mungkin tidak
ingin untuk gulir ke atas (tabs mungkin bergulir keluar view!).

Ketika kita belajar bahwa Chrome mengatur posisi gulir untuk kita
sekarang, dan menyadari bahwa aplikasi berbeda akan memiliki
kebutuhan gulir yang berbeda. Kita agak kehilangan kepercayaan bahwa
kita butuh untuk menyediakan sesuatu-khususnya ketika orang-orang
hanya ingin gulir ke atas ( yang anda lihat jelas untuk ditambahkan ke
aplikasi anda oleh anda sendiri).

Berdasarkan hal ini, kita tidak lagi meresa cukup kuat untuk melakukan
kerja kita sendiri (seperti anda memiliki waktu terbatas!). Tapi, kami
senang membantu siapapun yang merasa cenderung untuk menerapkan
sebuah solusi umum. Sebuah solusi solid dapat bahkan hidup di proyek.
Hubungi kami jika Anda memulainya :)

20
Philosophy
Tujuan panduan ini adalah untuk menjelaskan model mental untuk dimiliki
ketika menggunakan React Router. Kami menyebutknya “Dynamic
Routing”, yang sangat berbeda dari “Static Routing” yang mungkin anda
telah terbiasa dengannya.

Static Routing
Jika anda menggunakan Rail, Express, Ember, Angular dll. Anda telah
menggunkana routing statis. Di kerangka kerja (framework) ini, anda
mendeklarasikan route anda sebagai awalan aplikasi anda sebelum
rendering apapun dilakukan. React Router pre-v4 juga statis (hampir
semua). Mari lihat bagaimana konfigurasi route di express:

// Express Style routing:

app.get("/", handleIndex);
app.get("/invoices", handleInvoices);
app.get("/invoices/:id", handleInvoice);
app.get("/invoices/:id/edit", handleInvoiceEdit);

app.listen();
Perhatikan bagaimana route dideklarasikan sebelum app listens, router
client side yang telah kita gunakan mirip. Di Angular anda
mendeklarasikan route anda didepan dan mengimpornya ke top-level
AppModule sebelum rendering:

// Angular Style routing:

const appRoutes: Routes = [
{
path: "crisis-center",
component: CrisisListComponent
},
{
path: "hero/:id",
component: HeroDetailComponent
},
{
path: "heroes",
component: HeroListComponent,
data: { title: "Heroes List" }
},
{
path: "",
redirectTo: "/heroes",
pathMatch: "full"
21
 },
{
path: "**",
component: PageNotFoundComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(appRoutes)]
})
export class AppModule {}
Ember memiliki sebuah konvensional file `routes.js` yang membangun
reads dan import ke aplikasi anda. Lagi, ini terjadi sebelum aplikasi anda
dirender.

// Ember Style Router:

Router.map(function() {
this.route("about");
this.route("contact");
this.route("rentals", function() {
this.route("show", { path: "/:rental_id" });
});
});

export default Router;

Meskipun API berbeda, mereka semua membagikan model “static routes”.
React Router juga mengikuti hal tersebut sampai v4.

Untuk bisa sukses dengan React Router, anda butuh melupakan

semuanya! :O

BackStory
Sejujurnya kami sangat frustasi dengan arah yang kami telah ambil Reat
Router v2. Kami (Michael dan Ryan) merasa terbatasi oleh API, telah kami
akui kami mengimplementasikan ulang bagian React (lifecycles, dan
lainnya), dan itu tidak cocok dengan mental model React yang telah
berikan ke kita untuk perancangan (composing) UI.

Kami sedang berjalan melewati lorong hotel sesaat sebelum diskusi

workshop tentang apa yang akan kami lakukan. Kami bertanya satu sama
lain: “seperti apa tampilannya jika kami membangun router
menggunakan pola yang kami ajarkan di workshop kami?”

22
Hanya kurun waktu beberapa jam dalam pengembangan kami memiliki
sebuah bukti-dari-konsep yang kami tahu merupakan masa depan yang
kami ingin untuk routing. Kami berakhir dengan API yang tidak ada di “luar”
React. Sebuah API yang disusun, atau secara alami jatuh ke tempatnya,
dengan sisa React. Kami pikir anda akan menyukainya.

Dynamic Routing
Ketika kita mengatakan route dinamis, kami maksut adlah routing yang
mengambil bagian saat aplikasi anda di-render. Bukan sebuah
konfigurasi atau konversi diluar dari sebuah aplikasi yang sedang berjalan.
Yang berarti hampir semuanya merupakan sebuah komponen di React
Router. Ini adalah 60 detik tinjauan API untuk melihat bagaimana cara
kerjanya:

Pertama, ambil sendiri sebuah komponen Router untuk lingkungan yang

anda targetkan dan render di atas aplikasi anda.

// react-native
import { NativeRouter } from "react-router-native";

// react-dom (what we'll use here)

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
el
);
Lalu, ambil komponen link untuk link ke sebuah lokasi baru:

const App = () => (

<div>
<nav>
<Link to="/dashboard">Dashboard</Link>
</nav>
</div>
);
Akhirnya, render sebuah Route untuk menampilkan beberapa UI ketika
pengguna mengunjungi `/dashboard.`

const App = () => (

<div>
<nav>

23
 <Link to="/dashboard">Dashboard</Link>
</nav>
<div>
<Route path="/dashboard" component={Dashboard} />
</div>
</div>
);
Route akan render <Dashboard {…props}/> dimana props merupakan
router khusus yang tampak seperti `{match, location, history}`. Jika
pengguna tidak berada di /dashboard kemudian Route akan me-render
`null`. Itu cukup banyak untuk itu.

Nested Routes
Banyak router yang memiliki beberapa konsep “route bersarang”. Jika
anda telah menggunakan versi React Router sebelum v4, anda akan tahu
juga! Ketika anda berpindah dari sebuah konfigurasi route statis ke
dinamis, merender route, bagaimana anda “route bersarang”? oke,
bagaimana anda membuat sebuah `div` bersarang?

const App = () => (

<BrowserRouter>
{/* disini ada sebuah div */}
<div>
{/* disini ada sebuah Route */}
<Route path="/tacos" component={Tacos} />
</div>
</BrowserRouter>
);

// saat url cocok `/tacos` komponen ini renders

const Tacos = ({ match }) => (
//disini ada div bersarang
<div>
{/*disini ada Route bersarang,
match.url membantu kuta membuat sebuah path relatif */}
<Route path={match.url + "/carnitas"} component={Carnitas} />
</div>
);
Lihat bagaimana router tidak memiliki API “bersarang”? Route hanya
sebuah komponen, sama seperti `div`. jadi sebuah Route atau `div`
bersarang, anda lakukan saja.

Mari ke bagian lebih rumit

24
Responsive Routes
Meninjau seorang pengguna navigasi ke `/invoice`. Aplikasi anda
beradaptasi ke ukuran layar berbeda, ukuran layar memiliki sebuah
viewport sempit, dan anda hanya menampilkan daftar dari tagihan dan
sebuah link dashboard tagihan. Mereka dapat bernavigasi lebih dalam
dari sini.

Small Screen
url: /invoices

+----------------------+
| |
| Dashboard |
| |
+----------------------+
| |
| Invoice 01 |
| |
+----------------------+
| |
| Invoice 02 |
| |
+----------------------+
| |
| Invoice 03 |
| |
+----------------------+
| |
| Invoice 04 |
| |
+----------------------+
Pada sebuah layar yang lebih besar kita suka menampilkan sebuah
tampilan master-detail saat navigasi pada sis kiri dan dashboard atau
invoices khusus tampil di kanan.

Large Screen
url: /invoices/dashboard

+----------------------+---------------------------+
| | |
| Dashboard | |
| | Unpaid: 5 |
+----------------------+ |
| | Balance: $53,543.00 |
| Invoice 01 | |
| | Past Due: 2 |

25
+----------------------+ |
| | |
| Invoice 02 | |
| | +-------------------+ |
+----------------------+ | | |
| | | + + + | |
| Invoice 03 | | | + | | | |
| | | | | | + | + | |
+----------------------+ | | | | | | | | |
| | +--+-+--+--+--+--+--+ |
| Invoice 04 | |
| | |
+----------------------+---------------------------+
Kini berhenti sejenak untuk semenit dan pikirkan tentang url `incoives`
untuk kedua ukuran layar. Apakah itu sebuah route valid untuk sebuah
layar besar? Apa yang harus kita tempatkan pada sisi kanan?

Large Screen
url: /invoices
+----------------------+---------------------------+
| | |
| Dashboard | |
| | |
+----------------------+ |
| | |
| Invoice 01 | |
| | |
+----------------------+ |
| | |
| Invoice 02 | ??? |
| | |
+----------------------+ |
| | |
| Invoice 03 | |
| | |
+----------------------+ |
| | |
| Invoice 04 | |
| | |
+----------------------+---------------------------+
Pada layar besar, `/invoices` bukan merupakan sebuah route valid, tapi
pada sebuah layar kecil iya. Untuk membuat hal ini lebih menarik,
bayangkan seseorang dengan sebuah smartphone raksasa. Mereka
dapat mencari di `/invoices` di orientasi portrait dan lalu merotasi
smartphone mereka menjadi landscape. Tiba-tiba, kami memiliki sebuah

26
ruang untuk menampilkan UI master-detail, jadi anda harusnya me-
redirect ke kanan.

Route statis React Router versi sebelumnya tidak benar-benar memiliki

jawaban yang dapat disusun untuk ini. Ketika routing dinamis, namun,
anda dapat secara deklaratif menyusun fungsi ini. Jika anda berpikir
tentang routing sebagai UI, bukan sebagaia konfigurasi statis, intuisi anda
mengarahkan anda ke kode berikut:

const App = () => (

<AppLayout>
<Route path="/invoices" component={Invoices} />
</AppLayout>
);

const Invoices = () => (

<Layout>
{/* selalu menampilkan nav */}
<InvoicesNav />

<Media query={PRETTY_SMALL}>
{screenIsSmall =>
screenIsSmall ? (
// layar kecil tidak di redirect
<Switch>
<Route
exact
path="/invoices/dashboard"
component={Dashboard}
/>
<Route path="/invoices/:id" component={Invoice} />
</Switch>
) : (
//layar besar iya!
<Switch>
<Route
exact
path="/invoices/dashboard"
component={Dashboard}
/>
<Route path="/invoices/:id" component={Invoice} />
<Redirect from="/invoices" to="/invoices/dashboard" />
</Switch>
)
}
</Media>
</Layout>
27
);

Ketika pengguna merotasi smartphone mereka dari portrait ke landscape,

kode ini akan secara otomatis redirect mereka ke dashboard. Atur valid
route berubah tergantung pada natural dinamis dari sebuah perangkat
mobile di tangan seorang pengguna.

Ini hanya sebuah contoh. Ada banyak yang lainnya kami dapat
mendiskusikannya tapi kami akan merangkumnya dengan saran ini: untuk
mendapat intuisi anda segais dengan pemikiran React Router tentang
komponen, bukan route statis. Pikirkan tentang bagaimana cara untuk
menyelesaikan masalah dengan koposisi deklaratifnya React karena
hampir setiap “pertanyaan React Router” kemungkinan sebuah
“pertanyaan React”.

28
Testing
React Router bergantung pada React context untuk berfungsi. Ini berakibat
cara anda dapat melakukan pengujian komponen anda yang
menggunakan komponen kita.

Context
Jika anda mencoba untuk melakukan pengujian (test) unit dari komponen
anda yang merender sebuah <Link> atau sebuah <Route>, dll. Anda akan
mendapat beberapa error dan peringatan tentang context. Ketika anda
mungkin tergoda untuk mematikan context router anda sendiri, kami
merekomendasikan anda membungkus unit test anda di sebuah
komponen Router: base Router dengan sebuah prop `history`, atau sebuah
<StaticRouter>, <MemoryRouter>, atau <BrowserRouter> (jika
`window.history` tersedia sebagai sebah global dalam lingkungan test).

Menggunakan `MemoryRouter` atau sebuah `history` custom

direkomendasikan agar mampu untuk reset router antar test.

class Sidebar extends Component {

// ...
render() {
return (
<div>
<button onClick={this.toggleExpand}>expand</button>
<ul>
{users.map(user => (
<li>
<Link to={user.path}>{user.name}</Link>
</li>
))}
</ul>
</div>
);
}
}

// rusak
test("it expands when the button is clicked", () => {
render(<Sidebar />);
click(theButton);
expect(theThingToBeOpen);
});

// diperbaiki!
29
test("it expands when the button is clicked", () => {
render(
<MemoryRouter>
<Sidebar />
</MemoryRouter>
);
click(theButton);
expect(theThingToBeOpen);
});

Starting at specific routes

`<MemoryRouter>` mendukung props `initialEntries dan `initialIndex`, jadi
anda dapat booting aplikasi (atau bagaian yang lebih kecil dari sebuah
aplikasi) di lokasi khusus.

test("current user is active in sidebar", () => {

render(
<MemoryRouter initialEntries={["/users/2"]}>
<Sidebar />
</MemoryRouter>
);
expectUserToBeActive(2);
});

Navigating
Kita memiliki banyak test yang route berkerja ketika lokasi berubah, jadi
anda mungkin tidak butuh test seperti ini. Tapi jika anda butuh untuk
menguji navigasi dengan aplikasi anda, anda dapat melakukannya
seperti ini:

// app.js (a component file)

import React from "react";
import { Route, Link } from "react-router-dom";

// Subject kita, App, tapi anda dapat test sub apapun

//bagian dari aplikasi anda juga
const App = () => (
<div>
<Route
exact
path="/"
render={() => (
<div>
<h1>Welcome</h1>
30
 </div>
)}
/>
<Route
path="/dashboard"
render={() => (
<div>
<h1>Dashboard</h1>
<Link to="/" id="click-me">
Home
</Link>
</div>
)}
/>
</div>
);

//anda dapat juga dapat merenderer seperti "@testing-

library/react" atau "enzyme/mount" disini
import { render, unmountComponentAtNode } from "react-dom";
import { act } from 'react-dom/test-utils';
import { MemoryRouter } from "react-router-dom";

// app.test.js
it("navigates home when you click the logo", async => {
//di test nyata renderer seperti "@testing-library/react"
// akan mengurus epngaturan DOM elements
const root = document.createElement('div');
document.body.appendChild(root);

// Render app
render(
<MemoryRouter initialEntries={['/my/initial/route']}>
<App />
</MemoryRouter>,
root
);

// Interact with page

act(() => {
//temukan link (mungkin menggunakan text content)
const goHomeLink = document.querySelector('#nav-logo-home');
// Click it
goHomeLink.dispatchEvent(new MouseEvent("click", { bubbles: true }));
});
// periksa halaman yang benar konten muncul
expect(document.body.textContent).toBe('Home');
});

31
Checking location in tests
Anda tidak harus mengakses objek `location` atau `history` sesering
mungkin di test. Tapi jika anda melakukannya (seperti untuk memvalidasi
query params baru tersebut diatur di url bar), anda dapat menambahkan
sebuah route yang memperbarui sebuah variable didalam test:

// app.test.js
test("clicking filter links updates product query params", () => {
let testHistory, testLocation;
render(
<MemoryRouter initialEntries={["/my/initial/route"]}>
<App />
<Route
path="*"
render={({ history, location }) => {
testHistory = history;
testLocation = location;
return null;
}}
/>
</MemoryRouter>,
node
);

act(() => {
// contoh klik <Link> ke `/products?id=1234`
});

// tegaskan tentang url

expect(testLocation.pathname).toBe("/products");
const searchParams = new URLSearchParams(testLocation.search);
expect(searchParams.has("id")).toBe(true);
expect(searchParams.get("id")).toEqual("1234");
});

Altenatif:

1. Anda dapat menggunakan `BrowserRouter` jika test lingkungan

memiliki global browser `window.location` dan `window.history` (yang
merupakan bawaan di Jest melalui JSDOM, tapi anda tidak dapat
me-reset history antar test).
2. Alih-alih mengoper sebuah custom route ke `MemoryRouter`, anda
dapat menggunakan base Router dengan sebuah props `history`
dari package history .
32
// app.test.js
import { createMemoryHistory } from "history";
import { Router } from "react-router";

test("redirects to login page", () => {

const history = createMemoryHistory();
render(
<Router history={history}>
<App signedInUser={null} />
</Router>,
node
);
expect(history.location.pathname).toBe("/login");
});

React Testing Library

Lihat sebuah contoh di dokumentasi resmi: Testing React Router with
React Testing Library.

33
Deep Redux Integration
Redux adalah sebuah bagian penting dari ekosistem React. Kami ingin
membuat integrasi React Router dan Redux semulus mungkin untuk orang
–orang yang ingin menggunakan keduanya. Untuk itu, beberapa orang
ingin:

1. Sinkronisasi data routing dengan, dan mengakses dari, store.

2. Mampu navigasi dengan dispatching actions.
3. Memiliki dukungan untuk time travel debugging untuk mengubah
route di Redux devtools.

Semua ini memnyaratkan integrasi mendalam.

Rekomendasi kami adalah tidak menjaga route anda di Redux store anda
sama sekali. Ini alasan kami:

1. Routing data adalah sebuah props dari banyak komponen anda

yang merawatnya. Apaka itu datang dari store atau router, kode
komponen anda sebagian besar sama.
2. Pada kebanyakan kasus, anda akan menggunakan `Link`, `NavLink`
dan `Redirect` untuk aksi navigasi. Terkadang anda mungkin juga
perlu untuk navigasi secara terprogram, setelah beberapa tugas
asynchronous yang aslinya diinisi oleh sebuah `action`. Contoh, anda
mungkin dispatch sebuah action keitka pengguna submit sebuah
form login. thunk, saga atau async handler lain anda kemudian
autentifikasi kredensial. Lalu itu butuh untuk entah bagaimana
naivgasi ke sebuah halaman baru jika suskes. Solusi ini sangat
sederhana untuk memasukkan objek `history` (disedikan untuk
semua route komponen) di payload dari action, dan async handler
anda dapat menggunakan ini untuk navigate ketika sesuai.
3. Perubahan Route tidak mungkin menjadi masalah bagi time travel
debugging. Hanya kasus yang jelas adalah untuk debug issue
dengan router/store synchronous anda, dan masalah ini pergi jika
anda tidak men-synchronize mereka sama sakali.

Tapi jka adan merasa yakin tentang synchronizing route anda dengan
store anda, anda mungkin ingin mencoba Connected React Router,
sebuah pihak ketiga mengikat untuk React Router dan Redux.

34
Static Routes
Pada versi React Router sebelumnya menggunakan route statis untuk
mengkonfigurasi routing aplikasi anda. Statis route ini memungkinkan
untuk inspeksi dan pencocokan route sebelum rendering. Sejak v4
berpindah ke komponen dinamis alih-alih konfigurasi route, beberapa
kasus penggunaan sebelumnya menjadi kurang jelas dan sulit.

Kami mengembangkan sbeuah package untuk bekerja dengan

konfigurasi route statis dan React Router, untuk terus bertemu dengan
kasus penggunaan. Hal ini masih dalam pengembangna kini tapi kami
senang jika anda mencobanyta dan membantunya

React Router Config

35
API

Hooks
React Router mengirim dengan beberapa hooks yang memungkinkan
anda mengakses state dari router dan melakukan navigasi dari dalam
komponen anda.

Tolong catat: anda butuh menggunakan React >= 16.8 untuk

menggunakan salah satu dari hooks ini!

 useHistory
 useLocation
 useParams
 useRouteMatch

useHistory
hook useHistroy memberikan anda akses ke instance `history` yang anda
mungkin gunakan untuk navigasi.

import { useHistory } from "react-router-dom";

function HomeButton() {
let history = useHistory();

function handleClick() {
history.push("/home");
}

return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}

useLocation
hook useLocation mengembalikan object `location` yang mewakili URL saat
ini. Anda mungkin berpikir tetang hook ini seperti sebuah `useState` yang
mengembalikan location baru kapanpun URL berubah.

36
Hook ini dapat sangat berguna contoh dalam situasi ketika anda ingin
memicu sebuah event “page view” baru menggunakan alat analitik web
anda kapanpun sebauh halaman baru dimuat, seperti contoh berikut:

import React from "react";

import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
useLocation
} from "react-router-dom";

function usePageViews() {
let location = useLocation();
React.useEffect(() => {
ga.send(["pageview", location.pathname]);
}, [location]);
}

function App() {
usePageViews();
return <Switch>...</Switch>;
}

ReactDOM.render(
<Router>
<App />
</Router>,
node
);

useParams
useParams mengembalikan sebuah objek dari pasangan key/value dari
parameter URL. Yang digunakan untuk mengakses `match.params` di
<Route> saat ini.

import React from "react";

import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams
} from "react-router-dom";

function BlogPost() {
37
 let { slug } = useParams();
return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</Router>,
node
);

useRouteMatch
hook useRouterMatch mencoba untuk `match` URL saat ini dengan cara
yang sama dengan yang <Route> lakukan. Hook ini sangat berguna untuk
mendapatkan akses ke pencocokan data tanpa rendering sebuah
<Router> yang sebenarnya.

Kini, alih-alih

import { Route } from "react-router-dom";

function BlogPost() {
return (
<Route
path="/blog/:slug"
render={({ match }) => {
// lakukan apapun yang anda ingin dengan match...
return <div />;
}}
/>
);
}
Anda bisa saja

import { useRouteMatch } from "react-router-dom";

function BlogPost() {
let match = useRouteMatch("/blog/:slug");

38
 // lakukan apapun yang anda ingin dengan match...
return <div />;
}
Salah satu hook useRouteMatch:

 Tidak mengambil argument dan mengembalikan match object dari

<Route> saat ini.
 Mengambil sebuah objek, yang mirip ke prop argumen dari
matchPath. Bisa juga sebuah string (seperti contoh diatas) atau
sebah objek dengan prop yang cocok yang Route setujui, seperti ini:

const match = useRouteMatch({

path: "/BLOG/:slug/",
strict: true,
sensitive: true
});

39
<BrowserRouter>
Sebuah <Router> yang menggunakan history API HTML5 (`pushState`,
`replaceState` dan event `popstate`) untuk menjaga UI anda sinkron
dengan URL.

<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</BrowserRouter>

basename: string
Base URL untuk semua locations. Jika aplikasi anda disajikan dari sebuah
sub-direktori pada server anda, anda ingin mengatur ini ke sub-direktori.
Sebuah basename yang diformat dengan benar harus memilik sebuah
garis miring utama, tapi bukan garis miring saja.

<BrowserRouter basename="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
</BrowserRouter>
getUserConfirmation: func
sebuah fungsi digunakan untuk konfirmasi navigasi. Default untuk
menggunakan `window.confirm`.

<BrowserRouter
getUserConfirmation={(message, callback) => {
//ini adalah perilaku default
const allowTransition = window.confirm(message);
callback(allowTransition);
}}
/>

forceRefresh: boolean
jika `true` router akan menggunakan menyegarkan satu halaman penuh di
halaman navigasi. Anda mungkin ingin menggunakan ini untuk meniru

40
cara aplikasi tradisional server-rendered bekerja dengan menyegarkan
halaman penuh antar halaman navigasi.

<BrowserRouter forceRefresh={true} />

keyLength: number
Panjang dari `location.key`. Default-nya 6.

<BrowserRouter keyLength={12} />

Children: node
Elemen child untuk render

Catat: pada React < 16 anda harus menggunakan sebuah element anak
tunggal karena sebuah metode render tidak dapat mengembalikan lebih
dari satu element. Jika anda butuh lebih dari satu elemen, anda mungkin
harus mencoba membungkusnya dalam sebuah <div> tambahan.

41
<HashRouter>
Sebuah <Router> yang menggunakan bagian hash dari URL (yaitu
`window.location.hash`) untuk menjaga UI anda sinkron dengan URL.

CATATAN PENTING: hash history tidak mendukung `location.key` atau

`location.state`. Pada versi sebelumya kami mencoba untuk membuat
perilaku mereka cocok tapi ada edge-case kami tidak dapat selesaikan.
Kode atau plugin apapun yang butuh perilaku ini tidak akan berfungsi.
Karena teknik ini hanya dimaksutkan untuk mendukung browser warisan,
sebagai gantinya kami menganjurkan anda untuk melakukan konfigurasi
server anda untuk bekerja dengan `<BrowserHostory>`

<HashRouter
basename={optionalString}
getUserConfirmation={optionalFunc}
hashType={optionalString}
>
<App />
</HashRouter>

basename: string
base URL untuk semua lokasi. Sebuah basename yang diformat dengan
benar harus memiliki sebuah garis miring utama, tapi tidak ada garis
miring tambahan.

<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">

getUserConfirmation: function
sebuah fungsi untuk menggunakan konfirmasi navigasi. Default yang
digunakan `window.confirm`.

<HashRouter
getUserConfirmation={(message, callback) => {
// ini adalah perilaku default
const allowTransition = window.confirm(message);
callback(allowTransition);
}}
/>

42
hashType: string
tipe dari encoding untuk menggunakan `window.location.hash`. nilai yang
tersedia adalah:

 “slash”- membuat tanda apgar seperti #/ dan `#/sunshine/lollipops`

 “noslash” – membbuat tanda pagar seperti `#` dan
`#/sunshile/lollipops
 “hashbang” – membuat “ajax crawlable” (telah ditinggalkan
(deprecated) oleh google) tanda pagar seperti `#!` dan
`#!/sunshine/lollipops`

Nilai defaultnya “slash”.

Children: node
Sebuah element anak tunggal untuk di-render.

43
<Link>
Menyediakan deklaratif, navigasi yang dapat diakses disekitar aplikasi
anda.

<Link to="/about">About</Link>

to: string
sebuah string yang mewakili lokasi Link, dibuat oleh gabungan propserti
pathname-nya location, search, dan hash.

<Link to="/courses?sort=name" />

to: object
sebuah objek yang dapat diikuti oleh properti apapun:

 `parthname`: sebuah string yang mewakili `path` ke `link`.

 `search`: sebuah string yang mewakili query parameters.
 `hash`: sebuah tanda pagar yang diletakkan di URL., contoh `#a-
hash`.
 `state`: state yang mempertahankan `location`.

<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>

to: function
sebuah fungsi yang location saat ini dioper sebagai argument dan harus
mengembalikan location yang mewakili berupa sebuah string atau
sebuah objek.

44
<Link to={location => ({ ...location, pathname: "/courses" })} />

<Link to={location => `${location.pathname}?sort=name`} />

replace: boolean
Ketika `true`, mengklik link akan mengganti masukan saat ini didalam
history stack alih-alih menambahkan dengan yang lain.

<Link to="/courses" replace />

innerRef: function
mulai dari React Router 5.1., jika anda menggunakan React 16 anda
harusnya tidak butuh prop ini Karena forward the ref ke `<a>` yang
mendasari. Sebagai gantinya gunakan sebuah ref normal.

Mengizinkan akses ke `ref` yang mendasari komponen.

<Link
to="/"
innerRef={node => {
// `node` refers to the mounted DOM element
// atau null ketika unmounted
}}
/>

innerRef: RefObject
Mulai dari React Router 5.1., jika anda menggunakan React 16 anda
harusnya tidak butuh prop ini Karena forward the ref ke `<a>` yang
mendasari. Sebagai gantinya gunakan sebuah ref normal.

Gunakan `ref` yang mendasari komponen menggunakan React.createRef.

let anchorRef = React.createRef()

<Link to="/" innerRef={anchorRef} />

45
component: React.Component
Jika anda suka menggunakan komponen navigasi anda sendiri, anda bisa
dengan mudah melakukannya dengan mengopernya melalui prop
komponen.

const FancyLink = React.forwardRef((props, ref) => (

<a ref={ref} {...props}>💅 {props.children}</a>
))

<Link to="/" component={FancyLink} />

Others
Anda dapat juga mengoper props yang anda suka ke `<a>` seperti `title.id`,
`className`, dan lain-lain.

46
<NavLink>
Sebuah <Link> versi special yang akan menambahkan attibure style untuk
elemen yang telah dirender ketika cocok dengan URL saat ini.

<NavLink to="/about">About</NavLink>

activeClassName: string
class yang diberi ke elemen ketika <NavLink> aktif. Default class yang
diberikan adalah `active`. Class ini akan digabungkan dengan prop
`className`.

<NavLink to="/faq" activeClassName="selected">

FAQs
</NavLink>

activeStyle: object
style untuk diterapkan ke element ketika elemen aktif.

<NavLink
to="/faq"
activeStyle={{
fontWeight: "bold",
color: "red"
}}
>
FAQs
</NavLink>

exact: boolean
ketika `true`, class/style yang aktif hanya akan diterapka jika lokasi cocok
sama persis.

<NavLink exact to="/profile">

Profile
</NavLink>

47
strict: boolean
Ketika `true`, garis miring terakhir (trailing) pada pathname-nya location
akan dipertimbangkan ketika menentukan jika lokasi cocok dengan URL
saat ini. Liat dokumentasi <Route sctrict> untuk informasi lebih lanjut.

<NavLink strict to="/events/">

Events
</NavLink>

isActive: function
sebuah fungsi untuk menambahkan logika ekstra untuk menentukan
apakah link active. Fungsi ini harus digunakan jika anda ingin melakukan
hal lebih dari sekedar verifikasi pathname-nya link yang cocok dengan
pathname-nya URL saat ini.

<NavLink
to="/events/123"
isActive={(match, location) => {
if (!match) {
return false;
}

// anggap saja sevent aktif jika id event adalah bilangan ganjil

const eventID = parseInt(match.params.eventID);
return !isNaN(eventID) && eventID % 2 === 1;
}}
>
Event 123
</NavLink>

location: object
isActive membandingkan history location saat ini (biasanya URL browser
saat ini). Untuk dibandingkan dengan sebuah location yang berbeda,
sebuah location dapat dioper.

aria-current: string
nilai dari atribut `aria-current` digunakan pada sebuah link yang aktif. Nilai
yang tersedia adalah:

 “page” – gunakan untuk indikasi sebuah link dengan satu set link
paginasi.

48
  “step” – digunakan untuk indikasi sebuah link dengan sebuah
indikator langkah untuk sebuah langkah-bersarkan proses.
 “location” – digunakan untuk indikasi sebuah gambar yang disorot
secara visual sebagai komponen saat ini dari sebuah flow chart.
 “date” – digunakan untuk indikasi tanggal saat ini dalam sebuah
kalender
 “time” – digunakan untuk indikasi waktu dalam sebuah table waktu.
 “true” – digunakan untuk indikasi jika Navlink aktif .
 “false” – digunakan untuk mencegah teknologi bantuan dari
bereasksi ke sebuah link saat ini (mencegah banyak tags aria-
current pada satu halaman)

Nilai default-nya “page”.

Berdasarkan spesifikasi WAI-ARIA 1.1

49
<Prompt>
Di eksport ulang dari inti Prompt

50
<MemoryRouter>
Sebuah <Router> yang menjaga history dari “URL” anda di memory (bukan
membaca atau menulis address bar). Berguna dalam test dan lingkungan
non-broswer seperti React Navite.

<MemoryRouter
initialEntries={optionalArray}
initialIndex={optionalNumber}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</MemoryRouter>

initialEntries: array
sebuah arrat dari location didalam history stack. Ini mungkin jadi objek
location penuh dengan `{ pathname, search, hash, state } atau URL string
sederhana.

<MemoryRouter
initialEntries={["/one", "/two", { pathname: "/three" }]}
initialIndex={1}
>
<App />
</MemoryRouter>

initialIndex: number
index-nya initial location di dalam array dari `initialEntries`.

getUserConfirmation: function
sebuah fungsi yang digunakan untuk konfirmasi navigasi. Anda harus
mengunakan opsi ini ketika menggunakan <MemoryRouter> secara
langsung dengan sebuah <Prompt>.

keyLength: number
panjang location.key. nilai defaultnya 6

<MemoryRouter keyLength={12} />

51
Children: node
Elemen anda untuk render

Catat: pada React < 16 anda harus menggunakan sebuah elemen anak
tunggal karena sebuah metode render tidak dapat mengembalikan lebih
dari satu elemen. Jika anda butuh lebih banyak dari satu elemen, anda
mungkin mencoba untuk membungkusnya kedalam `<div>` tambahan.

52
<Redirect>
Rendering sebuah <Redirect> akan navigasi ke sebuah lokasi baru. Lokasi
baru akan menimpa lokasi saat ini didalam history stack. Sepeti server-
side redirects (HTTP 3xx) lakukan.

<Route exact path="/">

{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

to String
URL untuk redirect. Path URL valid apapun yang dipahami oleh path-to-
regexp@^1.7.0. Semua parameter URL yang digunakan harus ditutup dari.

<Redirect to="/somewhere/else" />

to: object
Sebuah lokasi yang dialihkan ke pathname dapat menjadi path URL valid
yang dipahami oleh path-to-regexp@^1.7.0

<Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>
Objek state dapat diakses melalui `this.props.location.state` di komponen
yang diredirect. Referrer key baru (yang buka sebuah nama special) akan
dapat diakses melalui `this.props.location.state.referrer` di komponen Login
ditunjuk oleh pathname `/login`.

push: boolean
Ketika `true`, redirecting akan mendorong sebuah masukan baru ke history
alih-alih menggati yang telah ada.

<Redirect push to="/somewhere/else" />

53
from: string
Sebuah pathname untuk pengalihan dari (redirect from). Path URL valid
apapun yang dipahami path-to-regexp@^1.7.0. Semua parameter URL
yang cocok disedikan untuk pola didalam `to`. Harus berisi semua
parameter yang digunakan didalam `to`. Parameter tambahan tidak
digunakan oleh `to` akan diabaikan.

Catat: `from` hanya dapat digunakan untuk mencocokan sebuah lokasi

ketika rendering sebuah <Redirect> didaalma sebuah <Swtich>. Lihat
<Switch children> untuk lebih detailnya.

<Switch>
<Redirect from="/old-path" to="/new-path" />
<Route path="/new-path">
<Place />
</Route>
</Switch>

// Redirect dengan parameters yang cocok

<Switch>
<Redirect from="/users/:id" to="/users/profile/:id" />
<Route path="/users/profile/:id">
<Profile />
</Route>
</Switch>

exact: boolean
Pencocokan `from` yang sama persis; setara dengan Route.exact.

Catat: excat ini hanya dapat gunakan didalam kata sambung dengan
`from` ke sebuah lokasi yang sama persis ketika rendering sebuah
<Redirect> dalam sebuah <Switch>. Lihat <Switch children> untuk lebih
detailnya.

<Switch>
<Redirect exact from="/" to="/home" />
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>

54
strict: boolean

Pencocokan `from` secara ketat; setara dengan Route.strict.

Catat: strict hanya dapat digunakan didalam kata sambung dengan

`from` ke pencocokan ketat sebuah lokasi ketika rendering sebuah
<redirect> didalam sebuah <Switch>. Iihat <Switch children> untuk lebih
detailnya,

<Switch>
<Redirect strict from="/one/" to="/home" />
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>

sensitive: boolean
Pencocokan `from` case sensitive; setara dengan Route.sensitive.

55
<Route>
Komponen Route mungkin adalah komponen paling penting di React
Router untuk memahami dan mempelajari cara menggunakannya.
Tanggung jawab dasar route adalah untuk render beberapa UI ketika
path-nya cocok dengan URL saat ini.

Perhatikan kode berikut:

import React from "react";

import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
<Router>
<div>
<Route exact path="/">
<Home />
</Route>
<Route path="/news">
<NewsFeed />
</Route>
</div>
</Router>,
node
);
Jika lokasi dari aplikasi dalah `/` lalu hierarki UI akan menjadi seperti ini:

<div>
<Home />
<!-- react-empty: 2 -->
</div>
Dan jika lokasi dari aplikasi adalah `/news` lalu UI hierakri akan menjadi:

<div>
<!-- react-empty: 1 -->
<NewsFeed />
</div>
Komen “react-empty” hanya implementasi detail dari `null` rendering-nya
React. Tapi untuk tujuan kita, ini edukatif. Sebuah route selalu secara teknis
“rendered” meskipun rendering `null`. Ketika path-nya <Route> cocok
dengan URL, route render anaknya (komponen anda).

Jika komponen yang sama digunkan sebagai anak dari beberapa <route>
yang sama di komponen tree. React akan melihat route ini sebagai
komponen contoh dan state-nya komponen akan menjadi jaga antar
56
perubahan route. Jika bukan ini yang diinginkan, sebuah key prop unik
ditambahkan ke setiap route komponen yang akan menyebabkan React
membuat kembali komponen istance ketika route berubah.

Route render methods.

Metode yang direkomendasikan untuk rendering sesuatu dengan sebuah
<Route> adalah untuk menggunakan elemen anak, seperti yang
ditampilkan diatas. Namun, ada beberapa metode lain yang anda dapat
gunakan untuk render sesuatu dengan sebuah <Route>. Metode ini
disediakan umumnya untuk mendukung aplikasi yang telah dibangun
dengan versi route terdahulu sebelum hooks diperkenalkan.

 <Route component>
 <Route render>
 <Route children> function

Anda harusnya hanya menggunakan satu dari prop yang diberikan

<route>. Lihat penjelasannya dibawah untuk memahami perbedaan
masing-masing.

Route props
Ketiga metode render semuanya akan mengoper tiga props route yang
sama

 match
 location
 history

component
sebuah React komponen render hanya ketika lokasi cocok, komponen
akan dirender dengan route props.

import React from "react";

import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// semua route props (match, location and history) tersedia di User

function User(props) {
return <h1>Hello {props.match.params.username}!</h1>;
}

57
ReactDOM.render(
<Router>
<Route path="/user/:username" component={User} />
</Router>,
node
);
Ketika anda menggunakan komponen (alih-alih `render` atau `children`,
dibawah) route menggunakan React.createElement untuk membuat
sebuah React element baru dari komponen yang diberikan. Ini berarti jika
anda menyediakan sebuah fungsi inline ke prop komponen, anda akan
membuat sebuah komponen baru setiap kali render. Hasil ini didalam
komponen yang ada unmounting dan komponen baru mounting alih-alih
hanya memperbarui komponen yang telah ada. Ketika menggunakan
sebuah fungsi inline atau rendering inline, gunakan render atau children
prop (dibawah).

render: function
fungsi ini memungkinkan rendering inline yang sesuai dan
membungkusnya tanpa remounting yang tidak dinginkan seperti yang
telah dijelaskan diatas.

Alih-alih memiliki sebuah element React baru yang dibuat untuk anda
menggunakan prop component. Anda dapat mengoper dalam sebuah
fungsi untuk dipanggil ketika lokasi cocok. Fungsi render prop memiliki
akses ke semua route props yang sama (match, location, dan history)
sebagai komponen render prop.

import React from "react";

import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// convenient inline rendering

ReactDOM.render(
<Router>
<Route path="/home" render={() => <div>Home</div>} />
</Router>,
node
);

// membungkus/menyusun
// anda dapat menyebarkan routeProps untuk membautanya tersedia ke rendered
// Component anda

58
function FadingRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={routeProps => (
<FadeIn>
<Component {...routeProps} />
</FadeIn>
)}
/>
);
}

ReactDOM.render(
<Router>
<FadingRoute path="/cool" component={Something} />
</Router>,
node
);
Peringatan: <Route component> lebih diutamakan dibanding <Route
render> jadi jangan gunakan keduanya di <Route> yang sama.

children: function
Terkadang anda butuh untuk render jika path cocok dengan lokasi atau
tidak. Pada kasus ini, anda dapat menggunakan fungsi `children` prop.
Fungsi ini bekerja persis seperti render kecuali yang fungsi dipanggil jika
ada yang cocok atau tidak.

`children` render prop menerima semua route prop yang sama sebagai
komponen dan render motode, kecuali ketika sebuah route gagal untuk
cocok dengan URL, lalu `match` adalah null. Ini mengizinkan anda untuk
secara dinamis mengatur UI anda berdasarkan pada ada tidaknya route
yang cocok. Disini kita menambahkan sebuha class `active` jika route
cocok.

import React from "react";

import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Link,
Route
} from "react-router-dom";

function ListItemLink({ to, ...rest }) {

return (

59
 <Route
path={to}
children={({ match }) => (
<li className={match ? "active" : ""}>
<Link to={to} {...rest} />
</li>
)}
/>
);
}

ReactDOM.render(
<Router>
<ul>
<ListItemLink to="/somewhere" />
<ListItemLink to="/somewhere-else" />
</ul>
</Router>,
node
);
Ini dapat juga berguna untuk animasi:

<Route
children={({ match, ...rest }) => (
{/* Animate will akan selalu render,jadi anda dapat menggunakan lifecycles
untuk animate its child in and out */}
<Animate>
{match && <Something {...rest}/>}
</Animate>
)}
/>
Peringatan: <Route children> lebih didahulukan dari kedua <Route
component> dan <Route render> jadi jangan gunakan lebih dari satu
didalam <Route> yang sama.

path: string | string[]

path URL valid apapun atau array dari path yang dimengerti oleh path-to-
regexp@^1.7.0.

<Route path="/users/:id">
<User />
</Route>

<Route path={["/users/:id", "/profile/:id"]}>

<User />
</Route>

60
Route tanpa sebuah path selalu cocok.

exact: boolean
Ketika `true`, hanya akan cocok jika path cocok sama persis dengan
`location.pathname`.

<Route exact path="/one">

<About />
</Route>
path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes

strict: boolean
Ketika `true` sebuah path yang memiliki garis miring dibelakang hanya
akan cocok dengan sebuah `location.pathname` dengan sebuah garis
mirip dibelakang. Ini tidak memiliki dampak ketika ada bagian URL
tambahan di `location.pathname`.

<Route strict path="/one/">

<About />
</Route>
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/two yes
Peringatan: strict dapat digunakan untuk memaksa sebuah
`location.pathname` tidak memiliki garis miring dibelakang, tapi untuk
melakukannya strict dan exact keduanya harus `true`.

<Route exact strict path="/one">

<About />
</Route>
path location.pathname matches?
/one /one yes
/one /one/ no
/one /one/two no

61
location: object
Sebuah element <Route> mencoba pencocokan dengan path ke lokasi
history saat ini (biasanya URL browser saat ini). Namun, sebuah location
dengan pathname berbeda dapat juga dioper untuk pencocokan.

Location berguna pada kasus saat anda butuh untuk mencocokan sebuah
<Route> ke sebuah location bukan location history saat ini, seperti yang
ditampilkan pada contoh Animated Transitions.

Jika sebuah elemen <Route> dibungkus dalam sebuah <Switch> dan cocok
dengan location yang dioper ke <Switch> (atau history location saat ini),
lalu location prop dioper ke <Route> akan ditindih oleh satu yang
digunakan oleh <Swicth> (diberikan disini).

sensitive: boolean
Ketika `true`, akan cocok jika path adalah case sensitive.

<Route sensitive path="/one">

<About />
</Route>

path location.pathname sensitive matches?

/one /one true yes
/one /one true no
/one /one false yes

62
<Router>
Antarmuka low-level yang umum untuk semua komponen router.
Biasanya aplikasi akan menggunakan satu dari router high-level :

 <BrowserRouter>
 <HashRouter>
 <MemoryRouter>
 <NativeRouter>
 <StaticRouter>

Use-case yang paling umum untuk penggunaan low-level <Router>

adalah untuk sinkronisasi sebuah history custom dengan sebuah library
state manajemen seperti Redux atau Mobx. Perhatikan bahwa ini tidak
dipersyaratkan untuk menggunakan library state manajemen bersama
React Router, hanya jika untuk integrasi mendalam.

import React from "react";

import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

ReactDOM.render(
<Router history={history}>
<App />
</Router>,
node
);

history: object
Sebuah objek history digunakan untuk navigasi

import React from "react";

import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";

const customHistory = createBrowserHistory();

ReactDOM.render(<Router history={customHistory} />, node);

63
Children: node
Sebuah elemen anak untuk render.

<Router>
<App />
</Router>

64
<StaticRouter>
Sebuah <Router> yang tidak pernah mengubah location.

Ini dapat berguna didalam skenario rendering server-side ketika

pengguna sebenarnya tidak klik sekitar. Jadi location tidak pernah
berubah. Karenanya, bernama: static. <StaticRouter> juga berguna dalam
pengujian sederhana ketika anda hanya butuh untuk plug in kedalam
sebuah location dan membatu assertion pada output render.

Ini adalah sebuah contoh node server yang mengirim sebuah status 302
untuk <Redirect> dan HTML biasa untuk request lain.

import http from "http";

import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router";

http
.createServer((req, res) => {
// context object ini berisi hasil dari render
const context = {};

const html = ReactDOMServer.renderToString(

<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);

// context.url akan berisi URL to redirect to if sebuah <Redirect>

// telah digunakan
if (context.url) {
res.writeHead(302, {
Location: context.url
});
res.end();
} else {
res.write(html);
res.end();
}
})
.listen(3000);

65
basename: string
Base URL untuk semua location. Sebuah basename yang diformat dengan
benar harusnya memiliki sebuah garis miring didepan, bukan garis miring
dibelakang.

<StaticRouter basename="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
</StaticRouter>

location: string
URL server yang diterima, mungkin req.url pada sebuah server node.

<StaticRouter location={req.url}>
<App />
</StaticRouter>

location: object
Sebuah objek location bentuknya seperti { pathname, search, hash, state }

<StaticRouter location={{ pathname: "/bubblegum" }}>

<App />
</StaticRouter>

context: object
Sebuah objek JavaScript. Selama render, komponen dapat ditambahkan
properti objek untuk menyimpan informasi tentang render.

const context = {}
<StaticRouter context={context}>
<App />
</StaticRouter>
Ketika sebuah <Route> cocok, itu akan mengoper objek context ke
komponen itu render sebuah prop `staticContext`. Periksa panduan Server
Rendering untuk informasi lebih cara melakukannya sendiri.

Setelah render, properti ini dapat digunakan untuk konfigurasi respose-

nya server.

if (context.status === "404") {

// ...
}

66
Children: node
Catat: pada React < 16 anda harus menggunakan sebuah anak elemen
tunggal karena sebuah metode render tidak dapat mengembalikan lebih
dari satu elemen. Jika anda butuh lebih dari satu elemen, anda mungkin
coba membungkusnya didalam <div> tambahan.

67
<Switch>
Render anak pertama <Route> atau <Redirect> yang cocok dengan
location.

Bagaimana ini berbeda daripada hanya menggunakan sebuah kumpulan

<Route>?

<Switch> unik dalam hal itu, <Switch> render sebuah route secara khusus.
Berdeda, setiap <Route> yang cocok dengan location render secara
inklusif. Perhatikan route ini:

import { Route } from "react-router";

let routes = (
<div>
<Route path="/about">
<About />
</Route>
<Route path="/:user">
<User />
</Route>
<Route>
<NoMatch />
</Route>
</div>
);
Jika URL adalah `/about`, lalu <About>, <User>, dan <NoMatch> akan
dirender semua karena mereka semua cocok dengan path. Ini oleh design,
memungkinkan kita untuk menyusun <Route> kedalam aplikasi kita
dengan banyak cara, seperti sidebars dan breadcrums, boostrap tap, dan
lain-lain.

Kadang-kadang, meskipun, kita ingin mengambil satu saja. <Route> untuk

render. Jika kita pada `/about` kita tidak ingin juga cocok dengan `/:user`
(atau menampilkan halaman “404” kita). Ini cara melakukannya dengan
Switch:

import { Route, Switch } from "react-router";

let routes = (
<Switch>
<Route exact path="/">
<Home />
</Route>

68
 <Route path="/about">
<About />
</Route>
<Route path="/:user">
<User />
</Route>
<Route>
<NoMatch />
</Route>
</Switch>
);
Kini, jika kita ada di `/about`, <Swtich> akan memulai mencari sebuah
<Route> yang cocok. <Route path=”/about”/> akan cocok dan <Switch>
akan berhenti mencari pencocokan dan render <About>. Demikian pula,
jika kita pada `/michael` lalu <User> akan dirender.

Ini juga berguna untuk transisi animasi karena <Route> yang cocok
dirender dalam posisi yang sama dengan yang sebelumnya.

let routes = (
<Fade>
<Switch>
{/* hanya akan ada satu child disni */}
<Route />
<Route />
</Switch>
</Fade>
);

let routes = (
<Fade>
{/* akan selalu dua children disini,
satu mungkin render null though, membuat transisi
sedikit lebuh cumbersome to work out */}
<Route />
<Route />
</Fade>
);

location: object
Sebuah objek location digunakan untuk pencocokan anak elemen alih-
alih history location saat ini (biasanya URL browser saat ini).

69
children: node
Semua anak dari <Swtich> harus berupa elemen <Route> atau <Redirect>.
Hanya anak pertama yang cocok dengan location saat ini yang akan
dirender.

Elemen <Route> dicocokan menggunakan prop `path` mereka dan elemen

<Redirect> akan dicocokan menggunakan prop `from`. Sebuah <Route>
dengan prop no path atau sebuah <Redirect> dengan prop `no from` akan
selalu cocok dengan location saat ini.

Ketika anda menyertakan sebuah <Redirect> kedalam sebuah <Switch>. Ini

dapat menggunakan location-nya <Route> apapun untuk pencocokan
props: `path`, `exact`, dan `strict`. `from` hanya alias untuk prop path.

Jika sebuah prop `location` diberikan ke <Switch>, ini akan menindih prop
`location` pada pencocokan elemen anak.

import { Redirect, Route, Switch } from "react-router";

let routes = (
<Switch>
<Route exact path="/">
<Home />
</Route>

<Route path="/users">
<Users />
</Route>
<Redirect from="/accounts" to="/users" />

<Route>
<NoMatch />
</Route>
</Switch>
);

70
generatePath
fungsi generatePath dapat digunakan untuk generate URL ke route. Secara
internal library path-to-regexp digunakan.

import { generatePath } from "react-router";

generatePath("/user/:id/:entity(posts|comments)", {
id: 1,
entity: "posts"
});
// Will return /user/1/posts
Hasil dari penyusunan path kedalam regular expression di cache. Jadi
tidak ada overhead pada generate banyak path dengan pola yang sama.

pattern: string
`generatePath` butuh 2 argumen. Pertama sebuah pola yang disediakan
sebagai attibure path ke komponen Route.

Params: object
Argument kedua adalah sebuah objek yang sesuai dengan params untuk
pola yang digunakan.

Jika params disediakan dan path tidak cocok, sebuah error akan muncul:

generatePath("/user/:id/:entity(posts|comments)", { id: 1 });

// TypeError: Expected "entity" to be defined

71
History
Istilah “history” dan “history object” pada dokumentasi ini merujuk pada
the history package , yang merupakan salah satu dari 2 dependencies
utama React Router (disamping React itu sendiri), yang menyediakan
beberapa impementasi berbeda untuk menggelola history session di
JavaScript dalam lingkungan berbeda.

Istilah berikut juga digunakan:

 “browser history”. Sebuah implementas DOM-spesifik, berguna

didalam web browser yang mendukung history API HTML5
 “hash history” – sebuah implementasi DOM-spesifik untuk web
browser warisan.
 “memory history” – sebuah impementasi history didalam-memory,
berguna didalam testing dan lingkungan non-DOM seperti React
Native.

Objek ‘history’ biasanya memiliki metode dan property berikut:

 `length` - (number) jumah entri dalam history stack

 `action` – (string) action saat ini (PUSH, REPLACE, atau POP)
 `location` - (objek) location saat ini. Mungkin memiliki property
berikut:
o `pathname`-(string) path dari URL
o `search` - (string)string query URL
o `hash` - (object) URL hash fragment
o `state`- (objek) ocation-spesifik yang disediakan contoh
`push(path, state)` ketika location ini didorong kedalam stack.
Hanya tersedia dibrowser dan history memory.
 `push(path, [state])` – (fungsi) mendorong entri baru kedalam
history stack
 `replace(path, [state])` – (fungsi) mengganti entri saat ini pada
history stack
 `go(n)` - (fungsi) pindah pointer kedalam history stack oleh n entries
 `goBack()` (fungsi) setara dengan `go(-1)`
 `goForward()` – (fungsi) setara dengan `go(1)`
 `block(prompt)` – (fungsi) mencegah navigasi ( lihat dokumentasi
history)
72
History is mutable
Objek history dapat diubah. Karena itu, direkomendasikan untuk
mengakses location dari render prop nya <Route>, bukan dari
`history.location`. Ini memastikan asumsi anda tentang React benar
didalam siklus hidup hook. Contoh:

class Comp extends React.Component {

componentDidUpdate(prevProps) {
// akan menjadi true
const locationChanged =
this.props.location !== prevProps.location;

// SALAH, akan *selalu* false karena history dapat berubah.

const locationChanged =
this.props.history.location !== prevProps.history.location;
}
}

<Route component={Comp} />;

Property tambahan mungkin juga ditampilkan tergantung pada
implementasi yang anda gunakan. Tolong rujuk ke dokumentasi history
untuk lebih detail.

73
Location
Locations menggambarkan letak aplikasi anda saat ini, kemana anda
ingin pergi, atau mungkin dimana tadi. Itu tampak seperti ini:

{
key: 'ac3df4', // not with HashHistory!
pathname: '/somewhere',
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
Router akan menyediakan anda dengan sebuha objek location di
beberapa tempat:

 Route component sebagai `this.props.location`

 Route render sebagai `({ location }) => ()`
 Route children sebagai `({ location }) => ()`
 withRouter sebagai `this.props.location`

location objek juga ditemukan di `history.location` tapi anda tidak harus

menggunakanya karena dapat berubah. Anda dapat membaca lebih
tentang itu didokumentasi history.

Sebuah objek location tidak pernah berubah jadi anda dapat

menggunakannya didalam siklus hidup hook untuk menentukan kapan
navigasi terjadi. Ini sangat berguna untuk pengambilan data dan animasi.

componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
// navigated!
}
}
Anda dapat menyediakan location alih-alih string ke beberapa tempat
yang menavigasi:

 Web Link to
 Navite Link to
 Redirect to
 `history.push`
 `history.replace`

74
Pada umumnya anda hanya menggunakan sebuah string, tapi jika anda
butuh untuk menambahkan beberapa “state location” yang akan
menerima apapun yang dikembalikan ke location khusus, sebagai
gantinya anda dapat menggunakan sebuah objek location. Objek location
berguna jika anda ingin cabang UI berdasarkan history navigasi ali-alih
hanya `path` (seperti modal).

// biasanya semua yang anda butuhkan

<Link to="/somewhere"/>

// tapi sebagai gantinya anda dapat menggunakan location

const location = {
pathname: '/somewhere',
state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)
akhirnya, anda dapat mengoper sebuah `location` diikuti komponen:

 Route
 Switch

Ini akan mencegah mereka dari menggunakan lokasi asli didalam state-
nya router. Ini berguna untuk animasi dan menunda navigasi, atau
kapanpun anda ingin untuk menipu sebuah komponen ke rendering saat
sebuah location berbeda bukan yang sebenarnya.

75
Match
Sebuah objek match berisi informasi tentang cara sebuah <Route path>
dicocokkan URL. Objek match berisi property berikut:

 `params` - (objek) Key/value pasangan diurai dari URL sesuai untuk

bagian dinamis dari `path`
 `isExact` - (Boolean) `true` jika seluruh URL telah cocok (tidak ada
karakter yang mengikuti)
 `path` - (string) pola path yang digunakan untuk pencocokan.
Berguna untuk membangun <Route> bersarang
 `url` - (string) pencocokan bagian URL. Berguna untuk membangun
<Link> bersarang

Anda akan memiliki akses ke objek `match` di beberapa tempat:

 Route komponen sebagai `this.props.match`

 Route render sebagai `({ match }) => ()`
 Route children sebagai `({ match }) => ()`
 withRouter sebagai `this.props.match`
 matchPath sebagai nilai yang dikembalikan
 useRouteMatch sebagai nilai yang dikembalikan

jika sebuah Route tidak memiliki sebuah path, dan karena itu selalu cocok,
anda akan mendapat pencocokan induk terdekat. Sama halnya dengan
`withRouter`.

null matches
Sebuah <Route> yang menggunakan prop `children` akan memanggil
fungsi `children` meski ketika path-nya route tidak cocok dengan location
saat ini. Pada kasus ini, `match` akan menjadi `null`. Mampu untuk render
sebuah konten <Route> ketika cocok dapat berguna, tapi tantangan
tertentu hadir dari situasi ini.

Cara default unutk “resolve” URL adalah mengabungkan string `match.url`

dengan path “relavite”.

let path = `${match.url}/relative-path`;

76
jika anda mencoba melakukan ini ketika `match` bernilai `null`, anda akan
berakhir dengan sebuah TypeError. Ini berarti dianggap tidak aman untuk
mencoba menggabungkan path “relative” didalam sebuah <Route> ketika
menggunakan prop `children`.

Mirip, tapi situasi yang lebih halus terjadi ketika anda menggunakan
sebuah <Route> tanpa path didalam sebuah <Route> yang generate
sebuah objek match `null`.

// location.pathname = '/matches'
<Route path="/does-not-match"
children={({ match }) => (
// match === null
<Route
render={({ match: pathlessMatch }) => (
// pathlessMatch === ???
)}
/>
)}
/>
<Route> tanpa path mewarisi objek `match` mereka dari induknya. Jika
induk mereka `match` bernilai `null`, lalu `match` mereka juga akan
menjadi `null`. Ini berarti bahwa a) child route/links apapun akan menjadi
absolute karena disana tidak ada induk untuk untuk menyelesaikannya
dan b) sebuah route tanpa path yang induk `match` dapat menjadi `null`
akan butuh untuk menggunakan prop `children` untuk render.

77
matchPath
Ini mengizinkan anda menggunakan pencocokan kode yang sama yang
<Route> gunakan kecuali diluar dari nomal siklus render. Seperti
berkumpulnya depencies data sebelum render di server.

import { matchPath } from "react-router";

const match = matchPath("/users/123", {

path: "/users/:id",
exact: true,
strict: false
});

pathname
Argument pertama adakah pathname anda ingin dicocokan. Jika anda
menggunakan ini deserver dengan Node.js. ini akan menjadi `req.path`.

props
Argument kedua adalah props untuk pencocokan, mereka mirip dengan
prop yang dicocokan yang diterima Route. Ini dapat juga menjadi sebuah
string atau sebuah array dari string sebagai jalan pintas untuk `{ path }`:

{
path, // seperti /users/:id; salah satu dari single string atau array dari s
trings
strict, // optional, defaults to false
exact, // optional, defaults to false
}

returns
Ini mengembalikan sebuah objek ketika disediakan pathname yang cocok
dengan prop path.

matchPath("/users/2", {
path: "/users/:id",
exact: true,
strict: true
});

// {
// isExact: true
// params: {

78
// id: "2"
// }
// path: "/users/:id"
// url: "/users/2"
// }
Ini akan mengembalikan `null` ketika pathname yang disediakan tidak
cocok dengan prop `path`.

matchPath("/users", {
path: "/users/:id",
exact: true,
strict: true
});

// null

79
withRouter
Anda dapat akses untuk propertinya objek history dan match-nya <Route>
terdekat melalui high-order komponen `withRouter`. `withRouter` akan
mengoper props `match`, `location`, dan `history` untuk membungkus
komponen kapanpun withRouter.

import React from "react";

import PropTypes from "prop-types";
import { withRouter } from "react-router";

//sebuah component yang menampilkan pathname dari location saat ini

class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};

render() {
const { match, location, history } = this.props;

return <div>You are now at {location.pathname}</div>;

}
}

// membuat component baru yang "connected" (untuk meminjam

// terminology redux) ke router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
catatan penting

`withRouter` tidak subscribe ke location yang berubah seperti Redux-nya

React connect untuk perubahan state. Sebagai gantinya, re-render
setelah location berubah menyebar keluar dari komponen <Router>. Ini
berarti bahwa `withRouter` tidak re-render pada transisi route kecuali
komponen induk re-render.

Static Methods dan Properties

Semua method static non-react specific dan properti dari komponen

pembungkus secara otomatis digandakan ke “connected” komponen.

80
Component.WrappedComponent
Komponen pembungkus tidak tersembunyi sebagai property statis
WrappedComponent pada komponen yang dikembalikan, yang dapat
digunakan untuk komponen testing dalam isolasi, diantara lainnya.

// MyComponent.js
export default withRouter(MyComponent)

// MyComponent.test.js
import MyComponent from './MyComponent'
render(<MyComponent.WrappedComponent location={{...}} ... />)

wrappedComponentRef: function
sebuah fungsi yang akan dioper sebagai prop `ref` untuk membungkus
komponen.

class Container extends React.Component {

componentDidMount() {
this.component.doSomething();
}

render() {
return (
<MyComponent wrappedComponentRef={c => (this.component = c)} />
);
}
}

81