React Router

❮ Öncesi Sonraki ❯

Create React App, sayfa yönlendirmeyi içermez.

React Router en popüler çözümdür.

React Router Ekle

Uygulamanıza React Router eklemek için, uygulamanın kök dizininden terminalde bunu çalıştırın:

npm i -D react-router-dom

Not: Bu eğitim, React Router v6'yı kullanır.

v5'ten yükseltme yapıyorsanız, @latest bayrağını kullanmanız gerekir:

npm i -D react-router-dom@latest

Klasör Yapısı

Birden çok sayfa rotası olan bir uygulama oluşturmak için önce dosya yapısıyla başlayalım.

Klasör içinde birkaç dosya içeren srcbir klasör oluşturacağız :pages

src\pages\:

Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js

Her dosya çok temel bir React bileşeni içerecektir.

Temel Kullanım

index.jsArtık dosyamızda Router'ımızı kullanacağız .

Örnek

URL'ye dayalı sayfalara yönlendirmek için React Router'ı kullanın:

index.js:

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

Örnek Açıklama

İçeriğimizi ilk önce ile sarıyoruz <BrowserRouter>.

Sonra bizim tanımlıyoruz <Routes>. Bir uygulamada birden fazla olabilir <Routes>. Temel örneğimiz yalnızca birini kullanır.

<Route>s iç içe olabilir. İlkinin <Route>bir yolu vardır / ve Layoutbileşeni oluşturur.

İç içe <Route>geçmişler devralır ve üst rotaya eklenir. Böylece blogsyol, ebeveyn ile birleştirilir ve /blogs.

Bileşen Homeyolunun bir yolu yoktur, ancak bir indexözniteliği vardır. Bu, bu rotayı ana rota için varsayılan rota olarak belirtir; bu, /.

öğesinin ayarlanması, tanımlanmamış tüm URL'ler için tümünü pathyakalama *işlevi görür. Bu, bir 404 hata sayfası için harika.

Sertikalı olmak!

React modüllerini tamamlayın, alıştırmaları yapın, sınava girin ve w3schools sertifikalı olun!

95 $ KAYIT

Sayfalar / Bileşenler

LayoutBileşenin ve öğeleri <Outlet>vardır <Link>.

Geçerli <Outlet>rotayı seçili hale getirir.

<Link> URL'yi ayarlamak ve tarama geçmişini takip etmek için kullanılır.

Dahili bir yola her bağlandığımızda, <Link> bunun yerine kullanacağız <a href="">.

"Yerleşim yolu", gezinme menüsü gibi tüm sayfalara ortak içerik ekleyen paylaşılan bir bileşendir.

Layout.js:

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

Home.js:

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

Blogs.js:

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

Contact.js:

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

NoPage.js:

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;