@sswahn/router NPM

Router ·

A lightweight and flexible routing solution. Router simplifies the process of implementing client-side routing in React applications, making it easier to manage different views and navigate between them while maintaining a component-based approach.

Features

Component-Based Routing: The library is designed to work with React's component-based architecture, allowing you to define routes using individual components.
"Not Found" Handling: The library provides a built-in mechanism to handle "Not Found" scenarios when no matching route is found. This is typically achieved by using a component without a path prop.
Programmatic Navigation: It supports programmatic navigation through a navigateTo function, enabling you to navigate to specific routes in your application.
Dynamic Component Resolution: Use function-based components to dynamically resolve which component to render based on conditions specific to each route.
Asynchronous Loading: The library supports lazy loading of components through React's Suspense mechanism, allowing for a smoother user experience.
Dynamic Parameters: Define dynamic parameters in your route paths to intelligently match and capture values for these parameters.
Simple and Efficient: The routing logic is implemented with simplicity and efficiency in mind, allowing for a clean and straightforward routing solution.
Customization: The library is flexible and can be customized to fit the specific needs of your application.

Installation

npm install @sswahn/router

Usage

Import the router component.

import { Router, Route } from '@sswahn/router'

Routing

Define your routes' paths and their associated components.

import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import NotFound from './components/NotFound'

<Router>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route component={NotFound}
</Router>

Lazy Loading

To lazy load a component provide a lazyFallback component.

<Router lazyFallback={CustomLoadingSpinner}>
  <Route path="/" component={Home} />
  ...
</Router>

Dynamic Parameters

The Route component supports dynamic parameters in route paths.

<Route path="/profile/{username}" component={UserProfile} />

Programmatic Navigation

Navigate to a route's path with navigateTo.

import { navigateTo } from '@sswahn/router'
...
const handleOnClick = event => {
  navigateTo('/about')
}

Dynamic Component Resolution

Use a function to return a component.

<Route path="/dashboard" component={() => {
  if (userIsAuthenticated) {
    return <AuthenticatedDashboard />
  } else {
    return <PublicDashboard />
  }
}} />