https://github.com/kruceo/milhas

React router, control specific path conditions to render.
https://github.com/kruceo/milhas

preact preact-router react react-router router

Last synced: about 2 months ago
JSON representation

React router, control specific path conditions to render.

• Host: GitHub
• URL: https://github.com/kruceo/milhas
• Owner: Kruceo
• License: isc
• Created: 2023-03-13T20:11:03.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-07-12T12:09:37.000Z (almost 3 years ago)
• Last Synced: 2025-10-07T02:50:30.363Z (9 months ago)
• Topics: preact, preact-router, react, react-router, router
• Language: TypeScript
• Homepage: https://www.kruceo.com
• Size: 544 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          






# **Milhas**

## **Introduction**

Milhas is a router specifically designed for developing Single-Page Applications (SPAs) with React. It provides an easy and efficient way to manage navigation within a React application, allowing developers to create dynamic and responsive user experiences.

## **Components**

### **Router**

The router acts as a container for all the navigation-related components and manages the navigation within the application.

### **Path**

The `Path` component is used to define a specific path within the application. It can be used with the `as` prop to specify the path that should match. Additionally, it supports an optional `absolute` prop.

- The `as` prop is used to define the path pattern that should match. It can include static segments and placeholders for dynamic values. Placeholders are denoted by a `:` symbol followed by a variable name, such as `:id`. These placeholders can capture dynamic values from the URL.

- The `absolute` prop, when set to `true`, requires an exact match of the path. If the `absolute` prop is not used or set to `false`, the path will match partially. This means that a path with placeholders can match a URL with additional segments before or after the placeholder value.

### **Anchor**

The `Anchor` component represents a hyperlink within the application. It can be used to navigate to different paths or perform other actions when clicked.

### **Redirect**

The `Redirect` component automatically redirects the user to another path when rendered.

### **E404**

The `E404` component is rendered when none of the defined paths match the current URL. It serves as an error page or a fallback component. Inside this component, you can define the content to be displayed when a route is not found.

## **Example**

```tsx

  

    


    This accepts any path that starts with "home".

    Ex: "/home/any/other/path" will match!

   

  


  

    


    Because of the "absolute" attribute, this will only match the exact "/about" path.

    Ex: "/about/any/other" will not match, 

    but just "/about" will match.

    

  


  

    


    This will match any "product" path with another path to follow, like "/products/123".

    Ex: "/product/255" will match.

    

  


  

    
This page will be rendered if any other path does not match the URL path.

  


```

Kruceo website is built with Milhas.