React-even-better-router-dom NPM

React Even Better Router DOM

Because every other router just doesn't cut it anymore 🤡

Motivation

Because React sucks and every React Router sucks and everything sucks and being a web developer is a worse crime than attempted murder at this point.

Install

yarn add react-even-better-router-dom

Usage

Basic

import { Router, makeRoutes } from 'react-even-better-router-dom';

function Home() {
	return (
		<h1>Home</h1>
	);
}

function Test() {
	return (
		<h1>Test</h1>
	);
}

function NotFound() {
	return (
		<span>404 not found</span>
	);
}

const ROUTES = makeRoutes({
	'': Home,
	'/test': Test,
});

function App() {
	return (
		<div>
			<Router
				routes={ ROUTES }
				fallback={ NotFound }
			/>
		</div>
	);
}

Dynamic routes

import { Router, makeRoutes } from 'react-even-better-router-dom';
import type { RouteComponentProps } from 'react-even-better-router-dom';

function Home() {
	return (
		<h1>Home</h1>
	);
}

function Project(props: RouteComponentProps) {
	const project = props.match.project;

	return (
		<h1>Project ID: { project }</h1>
	);
}

function NotFound() {
	return (
		<span>404 not found</span>
	);
}

const ROUTES = makeRoutes({
	'': Home,
	// `(\\d+)` is used to only parse integer values
	'/project/:project(\\d+)': Project,
});

function App() {
	return (
		<div>
			<Router
				routes={ ROUTES }
				fallback={ NotFound }
			/>
		</div>
	);
}

Lazy Loading

import { Router, makeRoutes } from 'react-even-better-router-dom';

// Lazy imports to only load the current page when it's actually needed
// The Router component will automagically wrap your component in a <Suspense> component
const Home = lazy(() => import('./pages/Home'));
const Test = lazy(() => import('./pages/About'));

function NotFound() {
	return (
		<span>404 not found</span>
	);
}

const ROUTES = makeRoutes({
	'': Home,
	'/test': Test,
});

function App() {
	return (
		<div>
			<Router
				routes={ ROUTES }
				fallback={ NotFound }
			/>
		</div>
	);
}

Navigating to different routes

import { Router, Link, makeRoutes } from 'react-even-better-router-dom';

function Home() {
	// A RouteCollection has a helper function called 'url'. 
	// This takes a FunctionComponent as an argument.
	// It returns a string to the route of the given component.
	const href = ROUTES.url(Test);

	return (
		<div>
			<h1>Home</h1>
			<Link href={ href }>Go to test page</Link>
		</div>
	);
}

function Test() {
	return (
		<h1>Test</h1>
	);
}

function NotFound() {
	return (
		<span>404 not found</span>
	);
}

const ROUTES = makeRoutes({
	'': Home,
	'/test': Test,
});

function App() {
	return (
		<div>
			<Router
				routes={ ROUTES }
				fallback={ NotFound }
			/>
		</div>
	);
}