Feather Router is a lightweight and lightning fast routing library for React applications. Easily manage your app's navigation and handle URL changes with a simple and intuitive API.
Feather Router is designed with simplicity and ease of use in mind, making it an ideal choice for React developers who value an elegant and efficient routing solution. Despite its lightweight design, Feather Router is also highly customizable, giving you the flexibility to create the routing experience that best suits your app's needs.
- Getting Started
- API Reference
- Components
- Hooks
- [
useRouteParams
] - [
useBrowserPath
]
- [
Add the package using NPM, Yarn, or the package manager of your choice!
npm install feather-router
yarn add feather-router
Feather Router provides a set of components and hooks that enable you to manage navigation and routing logic in your React application.
Summary
<Router />
is a top level component which wraps<Route />
components. It handles the logic of rendering the correct child<Route />
for the current browser path.<Route />
components define what content is displayed when a particular URL is accessed.
API
A top-level routing component that manages client side navigation by rendering child <Route />
components based on the current browser path.
Tip: Browser path refers to the unique, last part of a URL.
- The URL
www.example.com
has a browser path of "/"- The URL
www.example.com/about
has a browser path of "/about".
All child <Route />
components must be nested within a parent <Router />
component.
import { Router, Route } from "feather-router";
function App() {
return (
<Router>
<Route path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Router>
);
}
In this example:
- If the user navigates to
www.example.com
, theHomePage
component is rendered. - If the user navigates to
www.example.com/about
, theAboutPage
component is rendered.
Read more โ How does
<Router />
match a<Route />
?
The Route component defines the React component that should be rendered for a given browser path.
Tip: A
<Route />
component must be nested within a parent<Router />
component!
path
is a required property. It is a string which represents the browser path of the<Route />
. It must start with a forward slash/
.component
is an optional property. It is the React component that will be rendered if the browser path matches the path specified by the<Route />
<Route />
components can use wildcard dynamic segments in their path to match anything. The syntax for creating a dynamic segment is a colon :property_name
.
Example:
<Route path="/user/:id" component={UserPage} />
In the above example, browser URLs such as:
www.example.com/user/foo
www.example.com/user/bar
www.example.com/user/bazz
Will all match the path specified by the example <Route />
. The value of the dynamic segment (foo, bar, bazz) is extracted from the URL, and will be passed as a property to the UserPage
component. The name of the property in this example is id
.
When you create a dynamic segment, Feather Router uses the text after the :
(colon) as the property name. A path can have multiple dynamic segments.
<Route path="/:foo/:bar/:baz" component={MyComponent} />
will pass properties named foo
, bar
, and baz
to MyComponent
.
<Route />
components can also be nested within other <Route />
components.
import { Router, Route } from "feather-router";
function App() {
return <>
<Router>
<Route path="/" component={HomePage}> /> // A
<Route path="/blog"> // B
<Route path="/:blog_id" component={BlogPage} /> // C
<Route path="/new" component={NewBlogPage} /> // D
</Route>
</Router>
</>
}
In this example:
www.example.com
matches route A.www.example.com/blog
matches route B. Since no component was provided, nothing is rendered.www.example.com/blog/new
matches route D.www.example.com/blog/57
matches route C, and provides a property namedblog_id
with value "57" to componentBlogPage
.
function BlogPage({ blog_id }) {
return <>
<h1>Welcome to Blog #{blog_id}</h1>
<>
}
Did you notice that www.example.com/blog/new
matched route D, even though it met the criteria for route C as well? In the event of multiple routes matching a browser path, Feather Router will favour static routes over dynamic routes.
A static route is a route that does not contain any dynamic segments. A dynamic route is a route that contains dynamic segments.
useRouteParams
provides a direct way to access the dynamic parameters that are matched by the current URL.useBrowserPath
provides a straightforward means of modifying and retrieving the current URL path.
We love contributions to Feather Router, and welcome developers of all levels to get involved! Here's how you can contribute:
- Browse our list of open issues or feature requests to find something you're interested in working on. If you don't see anything that interests you, feel free to submit a new issue or feature request!
- Fork the Feather Router repository and create a new branch for your changes. Make sure to document and test your change!
- Submit a pull request and describe the changes you made!
Remember, no contribution is too big or too small! You can help in many ways, such as fixing bugs, adding new features, improving documentation, writing tests, or giving feedback.
Please be respectful and follow the Github code of conduct when interacting with other contributors. We aim to create a friendly and inclusive community for everyone.
Thank you for considering contributing to Feather Router!