React App Routing с Wouter — Пренасочване, маршрут по подразбиране и основен път

Wouter е библиотека, която ни позволява да зареждаме компоненти на React според URL адреси.

В тази статия ще разгледаме как да добавите маршрутизиране към приложение на React с Wouter.

Redirect

Можем да пренасочим към друг компонент на маршрута с функцията setLocation.

Например, можем да напишем:

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>
  );
}

Извикваме куката useLocation, за да върнем функцията setLocation.

След това извикваме това в манипулатора onClick, за да отидем до маршрута /about.

Съвпадение на динамични сегменти

Можем да използваме куката useRoute, за да съпоставим динамични сегменти от маршрута.

Например, ние пишем:

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>
  );
}

В UserPage извикваме useroute куката с модела на маршрута, за да получим параметъра name от params обекта.

В подложката path на Route имаме контейнера :name, за да добавим контейнера.

Можем също да съпоставим шаблона /foo?/:bar*, за да добавим заместителя bar.

/foo/baz? има незадължителния контейнер baz.

И /foo/bar+ с bar като един или повече сегменти също се поддържа за съвпадение.

Основен път

Можем да добавим основен път с base prop на компонента Router.

Например, ние пишем:

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>
  );
}

за да зададете основния път на /app .

Маршрут по подразбиране

Можем да добавим маршрут по подразбиране, като добавим компонента Route, без да добавяме prop path.

Например, ние пишем:

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>
  );
}

за да добавите маршрута Not Found.

Маршрутът по подразбиране винаги трябва да е последен, така че другите модели да могат да бъдат проверени, преди да се покаже ненамереният маршрут.

Заключение

Можем да добавим пренасочвания, да съпоставим динамични сегменти от маршрути, да зададем основния път и да добавим маршрут по подразбиране с Wouter в нашето приложение React.

Повече съдържание на plainenglish.io