@sswahn/router
v1.2.2
Published
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.
Downloads
21
Readme
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 />
}
}} />
Peer Dependencies
Router requires React as a peer dependency. You should have React installed in your project with a version compatible with this library.
- React: ^18.2.0
License
Router is MIT Licensed