Tiny, declarative, unopinionated, library-agnostic state-based router for React apps

Tiny, declarative, unopinionated, library-agnostic state-based router for React apps

stateful-router is a tiny, straightforward, declarative routing library for React. It has two components, <Router> and <Route>. It is unopinionated. It has no knowledge of the the URL bar, history, Redux, or any browser APIs. You simply pass a string into the path property of <Router>

stateful-router

stateful-router is a tiny, straightforward, declarative routing library for React. It has two components, <Router> and <Route>. It is unopinionated. It has no knowledge of the the URL bar, history, Redux, or any browser APIs. You simply pass a string into the path property of <Router>. The string can come from anywhere. Typically it would represent some part of the current URL. stateful-router does not interface with the browser.

All it does is conditionally render routes based on the path value you provide.

Under the hood, stateful-router uses the React context API.

Basic usage

To use stateful-router you create a top-level <Router> and child <Route> components:

import {Router, Route} from 'stateful-router'

const path = '/users'

const App = () => (
  <Router path={path}>
    <Route route='/home'> ... </Route>
    <Route route='/users'> ... </Route>
  </Router>
)

Routes can be nested arbitrarily.

<Router path='/users/all'>
  <Route route='/users'>
    Hello
    <Route route='/users/all'>
      World
    </Route>
  </Route>
</Router>

//  --> Hello World

Capturing params

Capture params by using : in your routes. Params are automatically passed as props to the immediate children of a <Route>.

const UserProfile = ({name, age}) => (
  My name is {name} and my age is {age}
)

const App = () => (
  <Router path='user/bob/42'>
    <Route route='user/:name/:age'>
      <UserProfile />
    </Route>
  </Router>
)

// --> My name is bob and my age is 42

Match exact paths

Match exact paths with a trailing / in your routes.

<Router path='/about/us'>
  <Route route='/about'>Matches</Route>
  <Route route='/about/'>Does not match</Route>
</Router>

Match multiple paths

You can pass an array into <Route> to match many paths.

<Route route={['/nowhere', '/users/:id']}>
  Matches either 'nowhere' or 'users/:id'. 'nowhere'
  has priority because it was specified first.
</Route>

The route that matches first will be the one to provide params to its children.

Example usage with react-redux

const App = ({url}) => (
  <Router path={url}>
    <AppContent />
  </Router>
)

const mapState = (state) => ({
  url: state.url,
})

export default connect(mapState)(App)

This is just one example. stateful-router is not tightly bound to Redux or any particular state management library.

Your state store should be the primary source of truth. The browser's URL should derive its value from your store, not the other way around. Your app should be able to function in the absence of any URL bar. The URL is just another piece of data as far as your app is concerned. To change the URL with Redux, for example:

// NavBar.js
const NavBar = () => (
  <div>
    <a onClick={() => dispatch(setUrl('home'))}>Home</a>
  </div>
)

// url-actions.js
const setUrl = (url) => ({
  type: 'SET_URL',
  payload: url,
})

// app.js
//
// Sync the browser's URL with your store state. For
// simplicity we're using store.subscribe(), but
// middleware would probably be more appropriate here.
store.subscribe(() => {
  const {url} = store.getState()
  if (url !== location.pathname)
    history.pushState(url)
})

Download Details:

Author: quxbaz

Source Code: https://github.com/quxbaz/stateful-router

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.