Wouter adalah library yang memungkinkan kita memuat komponen React menurut URL.

Pada artikel ini, kita akan melihat cara menambahkan perutean ke aplikasi React dengan Wouter.

Redirect

Kita dapat mengarahkan ulang ke komponen rute lain dengan setLocationfungsi.

Misalnya, kita dapat menulis:

import React from "react";
import { Route, Router, useLocation } from "wouter";
const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};
export default function App() {
  const [, setLocation] = useLocation();
return (
    <div>
      <a href="#" onClick={() => setLocation("/about")}>
        About
      </a>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

Kemudian kita sebut itu di onClickhandler untuk pergi ke /aboutrute.

Mencocokkan Segmen Dinamis

Kita dapat menggunakan useRoutehook untuk mencocokkan segmen rute dinamis.

Misalnya, kita menulis:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";
const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};
const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};
export default function App() {
  return (
    <div>
      <Router>
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

Di prop Route's , kami memiliki placeholder untuk menambahkan placeholder.path:name

Kami juga dapat mencocokkan /foo?/:bar*pola untuk menambahkan barplaceholder wildcard.

/foo/baz?bazmemiliki pengganti opsional .

Dan /foo/bar+dengan barmenjadi satu atau lebih segmen juga didukung untuk pencocokan.

Jalur Dasar

Kita dapat menambahkan jalur dasar dengan prop Routerkomponen .base

Misalnya, kita menulis:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";
const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};
const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};
export default function App() {
  return (
    <div>
      <Router base="/app">
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

Rute Default

Kita dapat menambahkan rute default dengan menambahkan Routekomponen tanpa menambahkan pathprop.

Misalnya, kita menulis:

import React from "react";
import { Route, Switch } from "wouter";
export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route>Not Found</Route>
      </Switch>
    </div>
  );
}

Rute default harus selalu datang terakhir sehingga pola lainnya dapat diperiksa sebelum menunjukkan rute yang tidak ditemukan.

Kesimpulan

Kami dapat menambahkan pengalihan, mencocokkan segmen rute dinamis, mengatur jalur dasar, dan menambahkan rute default dengan Wouter ke dalam aplikasi React kami.

Lebih banyak konten di plainenglish.io