React Router – czyli jak poruszać się po stronie

Routing umożliwia nawigację pomiędzy różnymi widokami, stronami i i w kontekscie Reacta – komponentami. Jednym z najpopularniejszych narzędzi do zarządzania Routingiem w aplikacjach React jest biblioteka React Router. W tym artykule omówimy, jak efektywnie z niej korzystać.

Instalacja

Jak instalacja większości bibliotek w Reactowym środowisku, w katalogu projektowym wystarczy użyć komendy

npm install react-router-dom

I to wszystko – od teraz możemy korzystać z cudów jakie daje nam React Router. Teraz w App.tsx dodajemy komponent RouterMain.tsx, który będzie naszym głównym switchem miedzy ścieżkami.

export const RouterMain = (): JSX.Element => {

    return (
        <Router history={history}>
            <Switch>
                <PublicRoute exact path={Routing.login} component={Login} />
                <ProtectedRoute exact path={Routing.project} component={Project} />
                <ProtectedRoute exact path={Routing.place} component={Place} />

                <Route component={NotFoundRoute} />
            </Switch>
        </Router>
    );
};

I jak to działa, otóż jak Router wykryje odpowiednią scieżkę, to przekieruje użytkownika do konkretnego komponentu. Jako że korzystamy jeszcze z PublicRoute i ProtectedRoute to mamy specjalną obsługę użytkowników zalogowanych i niezalogowanych, wchodzących na routy, na których nie powinni się znaleźć – na przykład poprzez zapisanie linków w przeglądarce czy wpisaniu linku z palca.

export const PublicRoute = ({ exact, path, component, children }: RouteProps): JSX.Element => {
    const storedPath = localStorage.getItem('path');

    if (isLoggedIn() && (path === Routing.home || path === Routing.base)) {
        return <Redirect to={routingPath(Routing.project)} />;
    }

    return (
        <Route exact={exact} path={path} component={component}>
            {children}
        </Route>
    );
};


export const ProtectedRoute = ({ exact, path, component, children }: RouteProps): JSX.Element => {
    if (!isLoggedIn()) {
        return (
            <Route exact={exact} path={path} component={RedirectToLogin}>
                {children}
            </Route>
        );
    }

    return (
        <Route exact={exact} path={path} component={component}>
            {children}
        </Route>
    );
};

Organizacja kodu

Jak to u nas działa? Stworzyliśmy plik Routing.ts który wygląda następująco –

export const Routing = {
base: '/',
home: '/:lang',
login: '/:lang/login'
project: '/:lang/project'
place: '/:lang/project/:place'
};

export const path = (path: string, params? : ExtractRouteParams<string>): string => {
return generatePath(path, {lang: i18n.language, ...params });
};

Mamy tutaj obiekt Routing, który zawiera wszystkie dostępne routki w systemie, określamy tutaj za pomocą dwukropka, która wartość, jest parametrem.
Poniżej mamy funkcję path, która korzysta z i18n od razu ustawiając język użytkownikowi (artykuł opisujący naszą implementacje w systemie) oraz przyjmuje dowolne parametry występujące w systemie.

Przekierowania

To teraz najważniejsze – przekierowania, jak dostać się po zalogowaniu na stronę projektu? Nic prostszego, za pomocą hooka `useHistory()` pozyskujemy obiekt, na którym, za pomocą metody .push() przenosimy użytkownika do dowolnego miejsca w systemie. My korzystamy z funkcji path, widocznej wyżej, która automatycznie przekazuje język użytkownika zapisany w i18n.

const history = useHistory();

const hangleLogin = () =>{
     history.push(path(Routing.project));
}

A co z przekazywaniem reszty parametrów? Jeżeli chcielibyśmy przejść z projektu, do dowolnego miejsca. To wyświetlając te miejsca w formie listy, po kliknięciu na konkretny element listy, wywołujemy onClick={redirect(placeId)}

    const redirect = (placeId) => {
        history.push(path(Routing.place, { place: placeId }));
    };

I tak naprawdę, w parę minut mamy skonfigurowany system przekierowań w naszej aplikacji.

Podsumowanie

React Router to potężne narzędzie do zarządzania Routingiem. Dzięki jego funkcjom, możemy łatwo i bezawaryjnie tworzyć dynamiczne i responsywne interfejsy. A stworzenie współpracującym z tym systemem funkcji czy komponentów, nie jest żadnym problemem.