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