Linears React Router

A small yet effective React router.

Getting Started

Install

You can install the package using:

npm i @linears/react-router

# Or using yarn

yarn add @linears/react-router

Router Component

Router takes the routes infomration in routes prop. Every route is required to have a path and component. The path is the url where the component is rendered. The component should be a reference and shouldn't be called.

import { Router } from "@linears/react-router";
import About from "./routes/about";
import Home from "./routes/home";

const App = () => (
    <Router
        routes={[
            {
                path: "/",
                component: Home,
            },
            {
                path: "/about",
                component: About,
            },
        ]}
        fallback={<div>404 - page not found</div>}
    />
);

Link Component

The Link takes the path in to prop and whenever it is clicked, it will navigate to the path without refreshing the page.

import { Link } from "@linears/react-router";

const MyLink = () => <Link to="/path/to/other/router">About</Link>;

useRouter hook

The useRouter allows you to change the route.

import { useRouter } from "@linears/react-router";

const Component = () => {
    const router = useRouter();
    return <button onClick={() => router.push("/path/to/somewhere")} />;
};

Use cases

Rendering pages conditionally

To render page conditionally you need add a condition property to a route. If condition is met, the component is rendered.

If you set loading property to true, the loadingComponent component will be rendered as long as it is true.

Finally if both loading and condition is falsy the component will redirect to redirectPath;

import { Router } from "@linears/react-router";
import Profile from "./routes/Profile";

const App = () => (
    <Router
        routes={[
            /* ... */
            {
                path: "/profile",
                component: Profile,
                condition: false,
                loading: false,
                loadingComponent: <div>Loading</div>,
                redirectPath: "/about",
            },
        ]}
        fallback={<div>404 - page not found</div>}
    />
);

The example aboce will redirect to /about, because the route condition has not been met and it is not loading.

Rendering dynamic routes

If you add : at a begnning of an "endpoint", it will be considered dynamic and will match any value.

Both the endpoint and the value will be passed to component's props as params. Take look at the example:

import { Router } from "@linears/react-router";

const App = () => (
    <Router
        routes={[
            /* ... */
            {
                path: "/posts/:userId/:postId", // Will match e.g. /posts/abc/xyz
                component: Profile,
            },
        ]}
        fallback={<div>404 - page not found</div>}
    />
);

const Profile = ({ params }) => {
    const postId = params["postId"];

    return; // render something
};