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.
The router acts as a container for all the navigation-related components and manages the navigation within the application.
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 totrue
, requires an exact match of the path. If theabsolute
prop is not used or set tofalse
, 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.
The Anchor
component represents a hyperlink within the application. It can be used to navigate to different paths or perform other actions when clicked.
The Redirect
component automatically redirects the user to another path when rendered.
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.
<Router>
<Path as="/home">
<p>
This accepts any path that starts with "home".
Ex: "/home/any/other/path" will match!
</p>
</Path>
<Path as="/about" absolute>
<p>
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.
</p>
</Path>
<Path as="/product/:id" absolute>
<p>
This will match any "product" path with another path to follow, like "/products/123".
Ex: "/product/255" will match.
</p>
</Path>
<E404>
<p>This page will be rendered if any other path does not match the URL path.</p>
</E404>
</Router>
Kruceo website is built with Milhas.