naive-router v1.6.9
naive-router
Super naive dependency free router for React
Usage
This library expose a single Route
component.
A Route
will display its children if an only current browser route matches its path
prop.
Route matching without parameters
<Route path="/foo/bar">
<div>Matched /foo/bar route</div>
</Route>
Route matching with path paremeters
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<Route path="/foo/{id}">
<Child />
</Route>
Route with render function as a child
Child of the route component can be a render function. This function will be invoked with two arguments : path and query parameters.
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<Route path="/foo/{id}">
{(pathParameters, queryParemeters) => <div>{pathParameters.id} {queryParameters.id}</div>}
</Route>
NotFound route
It's possible to display a special route when no Route
component has been matched.
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<>
<Route path="/foo/{id}">
{(pathParameters, queryParemeters) => <div>{pathParameters.id} {queryParameters.id}</div>}
</Route>
<NotFound>
<div>Not found !</div>
</NotFound>
</>
As for Route
component, it's possible to have more than one NotFound
component.
Each one of them will be display when no Route
is matched.
Pitfalls
This library comes with some pitfalls :
- It monkey-patch
window.history
methods :pushState
,go
,back
,replaceState
andforward
to broadcats any location change to everyRoute
component. Route
components pass path and query parameters as props to child components. Thus there is a risk of name conflict. The priority order is : 1) path parameters 2) query parameters 3) props. Passing a render function as a children to the Route component solve this issue.- Several
Route
components could match a given url (for instance both/foo/bar
matches routes/foo/bar
and/foo/{id}
). You should think about theRoute
component as a conditional display of its children based on the route.
Features
- Route matching
- Path parameters support
- Query parameters support
- 404 Route
- Nested routes
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago