Bismillaahirrohmaanirrohiim…
Setelah kita berhasil menginstall react JS, tentunya kita ingin mencoba menciptakan web dengan react JS ini.
Dalam web, kita sudah terbiasa mengenal yang namanya “LINK“, itu penting alasannya sanggup dipakai untuk berpindah dari satu halaman ke halaman yang lain.
Nah, di react JS untuk menciptakan fitur tersebut ikuti langkah-langkah di bawah ini:
1. Buat project baru
Kalau sudah pernah punya project, sanggup lanjut ke step berikutnya.
ketikkan di CMD
create-react-app belajar-router
tunggu hingga selesai, lalu masuk ke projectnya
cd belajar-router
2. Install react router
Ketikkan perintah
npm install react-router-dom
tunggu hingga selesai
3. Jalankan project
Seperti biasa, ketikkan perintah
npm start
Nah, itu tadi cara install react router di react JS.
Jika sudah jalan dan tidak ada error, kini lanjut tumpuan arahan menciptakan router di web.
Contoh menciptakan navigasi di react JS dengan react router
a. Buka folder project “belajar-router” memakai editor kesukaan (Sublime, VS Code, dll)
b. Buat folder “components” di dalam folder “src”
c. Di dalam folder “components“, buatlah beberapa file di bawah ini:
Header.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class Header extends Component {
state = {};
render() {
return (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contacts</Link>
</li>
</ul>
</div>
);
}
}
export default Header;
Home.js
import React, { Component } from 'react';
import Header from "./Header";
class Home extends Component {
state = { }
render() {
return (
<div>
<Header />
<h1>Home</h1>
<p>Ini yaitu halaman home</p>
</div>
);
}
}
export default Home;
About.js
import React, { Component } from 'react';
import Header from "./Header";
class About extends Component {
state = { }
render() {
return (
<div>
<Header />
<h1>About</h1>
<p>Ini yaitu halaman About</p>
</div>
);
}
}
export default About;
Contact.js
import React, { Component } from 'react';
import Header from "./Header";
class Contact extends Component {
state = { }
render() {
return (
<div>
<Header />
<h1>Kontak</h1>
<p>Ini yaitu halaman Kontak</p>
</div>
);
}
}
export default Contact;
d. Buat file di dalam folder “src”
routes.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function routes() {
return(
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
export default routes;
e. Edit file index.js di dalam folder “src”
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './routes';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Router />, document.getElementById('root'));
serviceWorker.unregister();
Setelah semua final dan di save, lihatlah browser yang telah dibuka dengan alamat http://localhost:3000
.
Jika tidak ada error, berarti pembuatan navigasi di react JS telah berhasil.
Silahkan dicoba dan di edit sendiri untuk lebih memahami konsep navigasi di react JS.
Semoga bermanfaat.
Sumber https://rasupe.com
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Contoh Penggunaan React Router Di React Js"
Posting Komentar