Jika Anda menargetkan lingkungan browser, Anda harus menggunakan react-router-dom
paket, bukan react-router
. Mereka mengikuti pendekatan yang sama seperti React, untuk memisahkan inti, ( react
) dan kode khusus platform, ( react-dom
, react-native
) dengan perbedaan halus yang Anda tidak perlu menginstal dua paket terpisah, sehingga paket lingkungan berisi semuanya kamu membutuhkan. Anda dapat menambahkannya ke proyek Anda sebagai:
yarn add react-router-dom
atau
npm i react-router-dom
Hal pertama yang perlu Anda lakukan adalah menyediakan <BrowserRouter>
komponen induk paling top dalam aplikasi Anda. <BrowserRouter>
menggunakan history
API HTML5 dan mengaturnya untuk Anda, jadi Anda tidak perlu khawatir tentang instantiasi sendiri dan meneruskannya ke<BrowserRouter>
komponen sebagai penyangga (seperti yang perlu Anda lakukan di versi sebelumnya).
Di V4, untuk bernavigasi secara terprogram Anda perlu mengakses history
objek, yang tersedia melalui React context
, selama Anda memiliki komponen <BrowserRouter>
penyedia sebagai orang tua paling top dalam aplikasi Anda. Perpustakaan memperlihatkan melalui konteks router
objek, yang berisi history
sebagai properti. The history
antarmuka menawarkan beberapa metode navigasi, seperti push
, replace
dan goBack
, antara lain. Anda dapat memeriksa seluruh daftar properti dan metode di sini .
Catatan Penting untuk pengguna Redux / Mobx
Jika Anda menggunakan redux atau mobx sebagai pustaka manajemen negara Anda di aplikasi Anda, Anda mungkin telah menemukan masalah dengan komponen yang harus sadar lokasi tetapi tidak dirender kembali setelah memicu pembaruan URL
Itu terjadi karena react-router
beralih location
ke komponen menggunakan model konteks.
Baik connect dan observer membuat komponen yang metode shouldComponentUpdate melakukan perbandingan yang dangkal dari alat peraga mereka saat ini dan alat peraga berikutnya. Komponen-komponen itu hanya akan merender ulang jika setidaknya satu penyangga telah berubah. Ini berarti bahwa untuk memastikan mereka memperbarui ketika lokasi berubah, mereka akan perlu diberi properti yang berubah ketika lokasi berubah.
2 pendekatan untuk menyelesaikan ini adalah:
- Bungkus komponen Anda yang terhubung dalam jalur
<Route />
. location
Objek saat ini adalah salah satu alat peraga yang <Route>
dilewatkan ke komponen yang direndernya
- Bungkus komponen Anda yang terhubung dengan komponen tingkat
withRouter
tinggi, yang sebenarnya memiliki efek yang sama dan menyuntikkan location
sebagai penyangga
Selain itu, ada empat cara untuk bernavigasi secara terprogram, diurutkan berdasarkan rekomendasi:
1.- Menggunakan <Route>
Komponen
Ini mempromosikan gaya deklaratif. Sebelum v4,
<Route />
komponen ditempatkan di bagian atas hirarki komponen Anda, harus memikirkan struktur rute Anda sebelumnya. Namun, sekarang Anda dapat memiliki
<Route>
komponen di
mana saja di pohon Anda, memungkinkan Anda untuk memiliki kontrol yang lebih baik untuk rendering bersyarat tergantung pada URL.
Route
menyuntikkan
match
,
location
dan
history
sebagai penyangga ke komponen Anda. Metode navigasi (seperti
push
,
replace
,
goBack
...) yang tersedia sebagai properti dari
history
objek.
Ada 3 cara untuk membuat sesuatu dengan Route
, dengan menggunakan salah satu component
, render
atau children
alat peraga, tetapi jangan gunakan lebih dari satu cara yang sama Route
. Pilihannya tergantung pada kasus penggunaan, tetapi pada dasarnya dua opsi pertama hanya akan membuat komponen Anda jika path
cocok dengan lokasi url, sedangkan dengan children
komponen akan ditampilkan apakah jalur cocok dengan lokasi atau tidak (berguna untuk menyesuaikan UI berdasarkan URL) sesuai).
Jika Anda ingin menyesuaikan output rendering komponen Anda, Anda perlu membungkus komponen Anda dalam suatu fungsi dan menggunakan render
opsi, untuk meneruskan ke komponen Anda alat peraga lain yang Anda inginkan, terlepas dari match
, location
dan history
. Contoh untuk menggambarkan:
import { BrowserRouter as Router } from 'react-router-dom'
const ButtonToNavigate = ({ title, history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
{title}
</button>
);
const SomeComponent = () => (
<Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)
const App = () => (
<Router>
<SomeComponent /> // Notice how in v4 we can have any other component interleaved
<AnotherComponent />
</Router>
);
2.- Menggunakan withRouter
HoC
Komponen pesanan lebih tinggi ini akan menyuntikkan alat peraga yang sama dengan Route
. Namun, ia membawa batasan bahwa Anda hanya dapat memiliki 1 HoC per file.
import { withRouter } from 'react-router-dom'
const ButtonToNavigate = ({ history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
Navigate
</button>
);
ButtonToNavigate.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}),
};
export default withRouter(ButtonToNavigate);
3.- Menggunakan Redirect
komponen
Rendering a
<Redirect>
akan menavigasi ke lokasi baru. Namun perlu diingat bahwa,
secara default , lokasi saat ini diganti dengan yang baru, seperti pengalihan sisi-server (HTTP 3xx). Lokasi baru disediakan oleh
to
prop, yang bisa berupa string (URL untuk dialihkan ke) atau
location
objek. Jika Anda ingin
memasukkan entri baru ke histori , lewati juga
push
prop dan atur
true
<Redirect to="/your-new-location" push />
4.- Mengakses router
secara manual melalui konteks
Sedikit berkecil hati karena
konteksnya masih merupakan API eksperimental dan kemungkinan akan pecah / berubah dalam rilis React di masa depan
const ButtonToNavigate = (props, context) => (
<button
type="button"
onClick={() => context.router.history.push('/my-new-location')}
>
Navigate to a new location
</button>
);
ButtonToNavigate.contextTypes = {
router: React.PropTypes.shape({
history: React.PropTypes.object.isRequired,
}),
};
Tak perlu dikatakan ada juga komponen Router lain yang dimaksudkan untuk ekosistem non browser, seperti <NativeRouter>
yang mereplikasi tumpukan navigasi dalam memori dan target platform React Native, tersedia melalui react-router-native
paket.
Untuk referensi lebih lanjut, jangan ragu untuk melihat dokumen resmi . Ada juga video yang dibuat oleh salah satu penulis perpustakaan yang memberikan pengantar yang cukup keren untuk bereaksi-router v4, menyoroti beberapa perubahan besar.