Router
For a simple Router
component, use the jaspr_router
package.
dart pub add jaspr_router
Use can use the Router
component for some basic routing. It takes a list of Route
s.
A simple use looks like this:
import 'pages/home.dart';
import 'pages/about.dart' ;
class App extends StatelessComponent {
@override
Iterable<Component> build(BuildContext context) sync* {
yield Router(routes: [
Route(path: '/', builder: (context, state) => Home()),
Route(path: '/about', builder: (context, state) => About()),
]);
}
}
jaspr_router
is adapted from the go_router
flutter package. If you know go_router
a lot of the core concepts
should feel familiar.
These docs are currently WIP. Until they are done you can refer to the go_router docs for orientation. Be aware that while many core concepts are similar, not everything will work exactly the same.
To push a new route call Router.of(context).push('/path');
inside your child components. Similarly, you can call .replace()
or .back()
.
๐จ Lazy Routes & Code Splitting
For larger web apps, we don't want to load everything together, but rather split our pages into smaller chunks.
jaspr
can do this automatically using LazyRoutes
and deferred imports.
To use lazy routes, change the above code to the following:
import 'pages/home.dart';
import 'pages/about.dart' deferred as about;
class App extends StatelessComponent {
@override
Iterable<Component> build(BuildContext context) sync* {
yield Router(
routes: [
Route(path: '/', builder: (context, state) => Home()),
Route.lazy(path: '/about', builder: (context, state) => about.About(), load: about.loadLibrary),
],
);
}
}
This will lazy load the appropriate javascript files for the '/about' route when navigating to it.