Cara menggunakan REACT-LOCATION pada JavaScript

Saya menggunakan react-router, jadi saya menggunakan komponen <Link /> Untuk tautan saya di seluruh aplikasi, dalam beberapa kasus saya perlu membuat tautan secara dinamis berdasarkan masukan pengguna, jadi saya memerlukan sesuatu seperti window.location, tetapi tanpa penyegaran halaman.

Table of Contents Show

Requirement
Prepare React Project
Configuration
Setup Router
Create Pages
Want to discuss? Contact me

Saya menemukan catatan kecil ini --- (https://github.com/rackt/react-router/issues/835 ) - saya mencoba menggunakan this.context.router.transitionTo(mylink) tapi saya mengalami masalah dengan konteks...

yang mengarahkan saya ke ( https://github.com/rackt/react-router/issues/1059 ), namun konteks kembali dan objek kosong, jadi ketika saya mencoba untuk melakukan sesuatu seperti: this.context.router.transitionTo(mylink); Saya mendapatkan Cannot read property 'transitionTo' of undefined (Jika saya mencoba melakukan sesuatu seperti mengatur this.context = konteks dalam konstruktor).

Bukan untuk berlarut-larut, tapi saya juga lelah mengacaukan konteks karena tidak didokumentasikan dengan sengaja karena masih dalam proses, jadi saya sudah baca.

Adakah yang mengalami masalah serupa?

Menggunakan boilerplate ini sebagai referensi saya membuat aplikasi Electron . Ini menggunakan webpack untuk membundel skrip dan mengekspresikan server untuk Host itu.

Konfigurasi Webpack secara praktis sama dengan ini dan server ini .

Script elektron dimuat:

mainWindow.loadURL('file://' + __dirname + '/app/index.html');

Dan index.html memuat skrip yang di-host oleh server:

<script src="http://localhost:3000/dist/bundle.js"></script>

Saya berlari electron index.js untuk membangun aplikasi dan node server untuk memulai server yang menggunakan webpack membundel skrip.

Ini berfungsi dengan baik, React komponen App saya sudah terpasang. Tapi bagaimana saya mengintegrasikan router reaksi ke dalam ini?

Saya menerapkannya dengan cara yang sama saya lakukan di aplikasi browser. Saya mendapatkan kesalahan ini:

[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

Ini mengambil jalur file sebagai rute. Melewati kode pelat ketel tidak membantu. Apa yang saya lewatkan?

Router pada React berfungsi untuk melakukan perpindahan antar page tanpa harus melakukan reload, karena React sendiri merupakan salah satu SPA. Bagi beberapa kalangan mungkin kesulitan untuk mengatur perpindahan antar page aplikasi React. Tutorial ini saya buat untuk mempermudah pemahaman cara melakukan routing pada React JS. Disini saya menggunakan library react-router-dom dengan komponen HashRouter.

Requirement

Node JS yang sudah terinstall pada komputer anda.
Package yarn sudah terinstall secara global.
Sudah mempersiapkan project React.

Prepare React Project

Untuk mengikuti tutorial ini anda harus membuat sebuah aplikasi React terlebih dahulu. Pembuatan aplikasi dapat menggunakan template create-react-app maupun dengan webpack. Jika anda kesulitan baca tutorial saya sebelumnya.

Configuration

Setup Router

Langkah pertama adalah tambahkan library react-router-dom.

yarn add react-router-dom

Buat routing file, kali ini saya membuatnya dalam directory ./src/router/App.js. Untuk melakukan routing, anda perlu menambahkan baris kode berikut kedalam App.js.

import { HashRouter, Switch, Route } from 'react-router-dom'

Kemudian tambahkan page yang akan dilakukan routing. Dalam kasus saya menggunakan page Home dan About.

import HomePage from ‘../pages/home/Home’
import AboutPage from ‘../pages/about/About’

Jika sudah masukan modulName ( HomePage dan AboutPage ) kedalam component <Route>, tidak lupa tambahkan path pada masing-masing <Route>. Hasil akhirnya nampak seperti baris kode berikut.

Create Pages

Buat 2 buah test file, dalam directory ./src/pages/home/Home.js dan ./src/pages/home/About.js untuk menguji coba penggunaan routing React. Isi file Home.js seperti ini.

Sedangkan file About.js berisi baris kode berikut.