Route any path dynamically in react/preact. Handle nested and relatives paths with ease.
In contrast to existing router solution which require you declare your routes, this gives you dynamic control over "path" property for all routing needs.
npm i dynamic-router
// Currently supports react and preact.
// Import the appropriate subdir:
import Router from 'dynamic-router/react';
// After that both work the same way
<Router router={router} [...options]></Router>
-
router
[component]
A component class whoseprops
include arouter
with routing related properties/methods using which you can route/render your desired component.( props ) => { props.router.<…> }
-
path
[string]
Current path -
link
[function]
Function to make links (instead of using<a href>
)router.link(href, text)
-
route
[function]
Function to immediately route to the specified pathrouter.route(path)
-
Options:
-
publicPath
[string]
Base path appended to all routes. -
redirectLimit
[number=10]
Prevents going over this many route changes in a short amount of time. -
redirectLimitTime
[number=1000]
Prevents a number of route changes in this threshold time in ms. -
handleTooManyRedirects
[function]
Render function to handle when route changes cross the the threshold. Default: (Displays)() => 'Error: Too many redirects'
Note props
will also include any other properties passed to the Router
class, so as to pass them down to the router
component (filled with the special router
prop described above)
import React from 'react';
import Router from 'dynamic-router/react';
const router = props => {
const {path, link, route} = props.router;
// Route by if/else
if (path === '/') {
return <div> Home </div>
} else if (path === '/foo') {
return <div> Foo </div>
}
// Route by object properties
return {
'/': <div> Home </div>,
'/foo': <div> Foo </div>
}[path];
// Route by switch statements
switch(path) {
case '/': return <div> Home </div>
case '/foo': return <div> Foo </div>
case '/bar-even':
case '/bar-multiple':
case '/bar-routes':
return <div> Bar </div>
}
// Route by matching, and handling nested routes:
if (path.match('^/foo')) { // begins with /foo
return <FooNested router={props.router}> // pass down the router prop
}
}
const FooNested = props => {
const {path, link, route} = props.router;
return {
'/foo/bar': <div> Foo Bar </div>,
'/foo/baz': <div> Foo Baz </div>,
}[path];
}
const App = <Router router={router}></Router>
-
All operations (link, route, etc.) are done via top level
router
prop. So you need to pass it down to nested components if they need it. I.e. you must:-
Use the provided
router.link
to create an<a>
link for the path to be handled by router when user clicks it. -
Use the provided
router.route
to change the path.
-