Need help with SwiftUIRouter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

frzi
436 Stars 24 Forks MIT License 87 Commits 2 Opened issues

Description

Path based routing in SwiftUI

Services available

!
?

Need anything else?

Contributors list

# 193,190
Swift
swiftui
wwdc
Shell
60 commits
# 569,047
Swift
swiftui
2 commits
# 80,791
Objecti...
carthag...
swift-s...
swift5
2 commits
# 167,368
react-n...
TypeScr...
React N...
React
1 commit
# 588,865
Swift
swiftui
1 commit

SwiftUI Router

Easy and maintainable app navigation with path based routing for SwiftUI.

SwiftUI SwiftUI Swift Xcode MIT

With SwiftUI Router you can power your SwiftUI app with path based routing. By utilizing a path based system, navigation in your app becomes more flexible and easier to maintain.

Index

Installation 🛠

In Xcode add the dependency to your project via File > Swift Packages > Add Package Dependency... and use the following url:

https://github.com/frzi/SwiftUIRouter.git

Once added, import the package in your code:

swift
import SwiftUIRouter
Bada bing bada boom you're ready to go.


Documentation 📚


Usage 🚀

Below a quick rundown of the available views and objects and their basic features. For further details, please check out the documentation in the Swift files.

Router

Router {
    RootView()
}

The entry of a routing environment. Wrap your entire app (or just the part that needs routing) inside a

Router
. This view will initialize all necessary environment values needed for routes.


Route

Route(path: "news/*") {
    NewsScreen()
}
Route(path: "settings") {
    SettingsScreen()
}
Route(path: "user/:id?") { info in
    UserScreen(id: info.parameters["id"])
}

A view that will only render its contents if its path matches that of the environment. Use

/*
to also match deeper paths. E.g.: the path
news/*
will match the following environment paths:
/news
,
/news/latest
,
/news/article/1
etc.

Parameters

Paths can contain parameters (aka placeholders) that can be read individually. A parameter's name is prefixed with a colon (

:
). Additionally, a parameter can be considered optional by suffixing it with a question mark (
?
). The parameters are passed down as a
[String : String]
in an
RouteInformation
object to a
Route
's contents.
Note: Parameters may only exist of alphanumeric characters (A-Z, a-z and 0-9) and must start with a letter.

Parameter validation

func validateUserID(routeInfo: RouteInformation) -> UUID? {
    UUID(routeInfo.parameters["id"] ?? "")
}

Route(path: "user/:id", validator: validateUserID) { userID in UserScreen(userID: userID) }

A

Route
provides an extra step for validating parameters in a path.

Let's say your

Route
has the path
/user/:id
. By default, the
:id
parameter can be anything. But in this case you only want valid UUIDs. Using a
Route
's
validator
argument, you're given a chance to validate (and transform) the parameter's value.

A validator is a simple function that's passed a

RouteInformation
object (containing the parameters) and returns the transformed value as an optional. The new transformed value is passed down to your view instead of the default
RouteInformation
object. If the transformed value is
nil
the
Route
will prevent rendering its contents.


NavLink

NavLink(to: "/news/latest") {
    Text("Latest news")
}

A wrapper around a

Button
that will navigate to the given path if pressed.


SwitchRoutes

SwitchRoutes {
    Route(path: "latest") {
        LatestNewsScreen()
    }
    Route(path: "article/:id") { info in
        NewsArticleScreen(articleID: info.parameters["id"]!)
    }
    Route(path: ":unknown") {
        ErrorScreen()
    }
    Route {
        NewsScreen()
    }
}

A view that will only render the first

Route
whose path matches the environment path. This is useful if you wish to work with fallbacks. This view can give a slight performance boost as it prevents
Route
s from path matching once a previous
Route
's path is already resolved.


Navigate

Navigate(to: "/error-404")

This view will automatically navigate to another path once rendered. One may consider using this view in a fallback

Route
inside a
SwitchRoutes
.


Navigator

@EnvironmentObject var navigator: Navigator

An environment object containg the data of the

Router
. With this object you can programmatically navigate to another path, go back in the history stack or go forward.


RouteInformation

@EnvironmentObject var routeInformation: RouteInformation

A lightweight object containing information of the current

Route
. A
RouteInformation
contains the current path and a
[String : String]
with all the parsed parameters.

This object is passed down by default in a

Route
to its contents. It's also accessible as an environment object.


License 📄

MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.