11 Aralık 2019 Çarşamba

React Router

Giriş
Şu satırı dahil ederiz.
import { Router, Route, Switch, HashRouter, Link } from "react-router-dom";
Açıklaması şöyle.
React Router is a Frontend tool that makes it look like you are navigating between pages
Örnek
Şöyle yaparız. <Router> içinde <Link>'ler tanımlanır. Her link için de path tanımlanır.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";

import "./styles.css";

function App() {
  return (
    <Router>
      <div>
        <Link to="/" style={{ marginRight: "10px" }}>
          Home
        </Link>
        <Link to="/login">Login</Link>
      </div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Hiç yorum yok:

Yorum Gönder