Point yang paling terpenting itu adalah harus menginstal react-router-dom sebagai dependenciesnya dengan terminal
kali ini saya buat di codesanbox, pakai text editor apapun bisa
Oke pertama-tama masuk ke menu index.js atau rootnya
- import React from "react";
- import ReactDOM from "react-dom";
- import Navbar from "./component/Navbar";
- import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
- import HomePage from "./pages/home-pages";
- import ContactPage from "./pages/contact-pages";
- import AboutPage from "./pages/about-pages";
- import "./styles.css";
- function App() {
- return (
- <Router>
- <div className="App">
- <Navbar />
- <Route path="/" exact component={HomePage} />
- <Route path="/about" exact component={AboutPage} />
- <Route path="/contact" exact component={ContactPage} />
- </div>
- </Router>
- );
- }
- const rootElement = document.getElementById("root");
- ReactDOM.render(<App />, rootElement);
Buat folder dengna nama component dan buat file Navbar.js
- import React, { Component } from "react";
- import { Link } from "react-router-dom";
- export default class Navbar extends Component {
- constructor(props) {
- super(props);
- this.state = {
- menus: [
- { label: "Home", path: "/" },
- { label: "About", path: "/about" },
- { label: "Contact", path: "/contact" }
- ]
- };
- }
- render() {
- return (
- <ul>
- {this.state.menus.map(menu => (
- <li style={styles.menuLi}>
- <Link to={menu.path}>{menu.label}</Link>
- </li>
- ))}
- </ul>
- );
- }
- }
- const styles = {
- menuLi: {
- display: "inline-block",
- padding: "10px",
- background: "#eaeaea"
- }
- };
Kemudian buat folder pages untuk tempat link yang dituju nanti, disini saya membuat 3 buah yaitu home-pages.js contact-pages.js dan about-pages.js
- import React from "react";
- const HomePage = props => {
- return (
- <div>
- <span>Ini halaman Home pages hehe</span>
- </div>
- );
- };
- export default HomePage;
- import React from "react";
- const ContactPage = props => {
- return (
- <div>
- <span>Ini halaman Contact </span>
- </div>
- );
- };
- export default ContactPage;
- import React from "react";
- const AboutPage = props => {
- return (
- <div>
- <span>Ini halaman About</span>
- </div>
- );
- };
- export default AboutPage;
Hasilnya akan seperti ini
Oke saya rasa ini cukup untuk pengetahuan dasar mengenai routing di reactJs.
wassalamualaikum wr wb
Tidak ada komentar:
Posting Komentar