How to use react router in dart?

[vnaki]

Help!!! How to use router in react-dart?

[aaronlademann-wf]

@wuquanyao you would have to write a JS interop for it.

[barriehadfield]

@aaronlademann-wf it might be a bit late for you, but I have successfully implemented React Router with this library which I will document here for anyone else who needs this info.

• Import ReactRouter (I am using webpack) and creat JS objects inside a wrapper

// React Router
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

window.ReactRouterWarper = {
  _Router: Router,
  _Switch: Switch,
  _Route: Route,
  _Link: Link,
}

• Create a react_router.dart which creates the Dart instances of the ReactRouter Components

@JS('ReactRouterWarper')
library wrapper;

import 'package:js/js.dart';
import 'package:react/react_client.dart';
import 'package:react/react_client/react_interop.dart';

@JS()
external ReactClass get _Router;
external ReactClass get _Switch;
external ReactClass get _Route;
external ReactClass get _Link;

final Router = new ReactJsComponentFactoryProxy(_Router);
final Switch = new ReactJsComponentFactoryProxy(_Switch);
final Route = new ReactJsComponentFactoryProxy(_Route);
final Link = new ReactJsComponentFactoryProxy(_Link);

• Use ReactRouter in your code - first create a top level Router

main() {
  setClientConfiguration();
  render(MainRouter({}), querySelector('#mount_point'));
}

var MainRouter = registerComponent(() => new _MainRouter());
class _MainRouter extends Component2 {
  render() {
    return Router(
      {},
      Switch(
        {},
        Route(
          {'path': '/login'},
          Login({}),
        ),
        Route(
          {
            'path': '/',
            'exact': true,
          },
          Home({}),
        ),
      ),
    );
  }
}

• Then to create a link, use the Link Component (in this case I am also using MaterialUI)

_appBar() {
    return AppBar(
      {'position': 'static'},
      ToolBar(
        {},
        Grid(
          {
            'container': true,
            'direction': 'row',
            'justify': 'flex-end',
          },
          Button(
            {'color': 'inherit'},
            Link({
              'to': '/login',
              'className': 'white-link-no-decoration',
            }, "login"),
          ),
        ),
      ),
    );
  }

• One final consideration, is that webdev serve returns a 404 for any route it cannot find, which is no use when you refresh a page with a route as you want your client-side code to resolve the link. Using webdev_proxy serve solves this problem as all 404s are redirected back to index.html and everything works perfectly.

[aaronlademann-wf]

@barriehadfield have you published your library to pub?

[barriehadfield]

Hi @aaronlademann-wf - the solution does not warrant a library as it is as simple as stated above. Your wonderful library made it really easy.

I would be more than happy to add to your example collection and issue a PR if that would be useful?

[aaronlademann-wf]

I'll leave it up to you if you want to contribute an example.

As far as webdev 404 handling is concerned... that's why our very own @evanweible-wf wrote webdev_proxy! Its works great - we use nothing but the proxy within our internal apps at Workiva.

[barriehadfield]

OK great. I will wait for your new release and issue a PR thereafter to avoid any potential merge conflicts.

The examples were instrumental in getting me started, so I think having ReactRouter covered would be good.

webpev_proxy is key! Thank you @evanweible-wf

[matthewnitschke]

If anyone else comes across this issue, I have created a library which includes the bindings that @barriehadfield created as well as the built js code to include in the codebase.

Repo can be found here: https://github.com/matthewnitschke/react_router_dart
And its published to pub here: https://pub.dev/packages/react_router

The library includes bindings for both react-dart and over_react