https://github.com/hez2010/BlazorRouter

An awesome router for blazor.
https://github.com/hez2010/BlazorRouter

Last synced: about 2 months ago
JSON representation

An awesome router for blazor.

• Host: GitHub
• URL: https://github.com/hez2010/BlazorRouter
• Owner: hez2010
• License: mit
• Created: 2019-06-28T18:17:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-11-12T19:36:23.000Z (about 2 months ago)
• Last Synced: 2024-11-12T20:28:15.730Z (about 2 months ago)
• Language: C#
• Size: 4.91 MB
• Stars: 66
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - BlazorRouter -   BlazorRouter is an awesome router inspired by react-router, providing declarative routing for Blazor. (Libraries & Extensions / Tools & Utilities)

README

        
# BlazorRouter [![nuget](https://img.shields.io/nuget/vpre/Hez2010.BlazorRouter.svg)](https://www.nuget.org/packages/Hez2010.BlazorRouter)

An awesome router for blazor inspired by react-router, providing declarative routing for Blazor.

## Installation

Via nuget package:

```

dotnet add package Hez2010.BlazorRouter

```

Then append `@using BlazorRouter` to your `_Imports.razor`

## Usage

Put `` to the place where you want to route your contents.  

Then use `` to config routing template with `Template` property.  

In the end, you can put the routed content inside the ``.  

Parameters in the routing template will be passed as `IDictionary` with attribute `[CascadingParameter(Name = "RouteParameters")]`.  

The order of routing is from the top to the bottom in ``, and it will use the first matched item.  

If `Template` was not defined or defined as empty, it will match any path. 

For example:

```html

    

        

    

    

        

    

    

        

    

    

        

    

    

        
404

    


```

Besides, you can nest `Switch` to use nested routing:

For example:

```html

    

        

    

    

        

    

    

        

    

    

        

            

                

            

            

                

            

            

                
404 in /user/id

            

        

    

    

        
404

    


```

`*` represents one (can be zero if it's the last segment in template) segment, and you can use `**` to match multiple segments (>= 0).

Note: `**` can only be the last segment.

```html

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

        
404

    


```

## Live Example

[Visit Sample](https://hez2010.github.io/BlazorRouter)  

For source, please check out `BlazorRouter.Sample`.