Allow usage of RouteHandler in version 1.0.0

[omerts]

Hey,

In order to have backward compatibility, and not break existing architecture, please allow usage of RouteHandler in version 1.0.0, along with the new createElement method.

[mjackson]

Sorry. If you need <RouteHandler>, please feel free to keep using 0.13.

[mwq27]

So quick question on the RouteHandler, how do I pass props to the children in 1.0.0 beta 3? I have this currently,

<RouteHandler editActivity={this.props.editActivity} updateVendorList={this.props.updateVendorList} vendors={this.props.vendors}/>

and it looks like the docs tell me to use {this.props.children in place of RouteHandler.

Thanks

[omerts]

Two ways: 1) Inside your route (parent) component

React.cloneElement(this.props.children, { editActivity: this.props.editActivity, updateVendorList... });

2) Implement the router's createElement evenHandler:

export function createElement(Component, props) {
  let injectedProps = {};
  switch (Component) {
    case (YourComponent): {
      injectedProps.injectProp = true;

      break;
    }
  }

  return <Component {...props} {..injectedProps} />;
}

React.render(<Router history={history} createElement={createElement} />...

[mwq27]

Thanks @omerts , I'll try this out once I figure out this Cannot read property 'createRouteFromReactElement' of undefined error. element.type is always undefined and im not sure how to set a type.

[seanchen1991]

@mwq27 Did you figure out the Cannot read property 'createRouteFromReactElement' of undefined error? I'm getting the same thing and am not sure how to fix it.

[chrisfinch]

Same here! TypeError: Cannot read property 'createRouteFromReactElement' of undefined

[omerts]

Could you send an example on how to reproduce the error?

[javflores]

Just tried to migrate to 1.0.0. Having the same issue here: Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

This is my set up:

'use strict';
import React from 'react';
import { render } from 'react-dom'
import Router from 'react-router';
import Home from './home/home';
import AthleteRegister from './registration/athlete-register';
import TrainerRegister from './registration/trainer-register';
import Login from './registration/login';
import Logout from './registration/logout';
import HomeTrainer from './home/home-trainer';
import AddAthlete from './add-athlete/add-athlete';
import Athletes from './my-athletes/athletes';
import AthleteProfile from './my-athletes/athlete-profile';
import DesignPeriodization from './design-periodization/design-periodization';
import Periodization from './periodization/periodization';
import { IndexRoute } from 'react-router';

let Route = Router.Route,
    RouteHandler = Router.RouteHandler,
    DefaultRoute = Router.DefaultRoute;

let App = React.createClass({
    render(){
        return (
            <div>
                <RouteHandler />
            </div>
        );
    }
});

let routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="athlete-register" component={AthleteRegister} />
        <Route path="trainer-register" component={TrainerRegister} />
        <Route path="home-trainer/:trainer" component={HomeTrainer} />
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="add-athlete/:trainer" component={AddAthlete}/>
        <Route path="athletes/:trainer" component={Athletes} />
        <Route path="athletes/:trainer/:athleteId" component={AthleteProfile} />
        <Route path="design-periodization/:trainer" component={DesignPeriodization}/>
        <Route path="periodization/:trainer/:periodizationId" component={Periodization}/>
    </Route>
);

render((
  <Router>{routes}</Router>
), document.body)

Still haven't figure out a solution.

[javflores]

Ouch, stupid me, I'm using RouteHandler with v1.0.0 in my app component. Fixed my Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined.

This is my new setup:

'use strict';
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, IndexRoute } from 'react-router';
import Home from './home/home';
import AthleteRegister from './registration/athlete-register';
import TrainerRegister from './registration/trainer-register';
import Login from './registration/login';
import Logout from './registration/logout';
import HomeTrainer from './home/home-trainer';
import AddAthlete from './add-athlete/add-athlete';
import Athletes from './my-athletes/athletes';
import AthleteProfile from './my-athletes/athlete-profile';
import DesignPeriodization from './design-periodization/design-periodization';
import Periodization from './periodization/periodization';

class App extends React.Component {
    render(){
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

let routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="athlete-register" component={AthleteRegister} />
        <Route path="trainer-register" component={TrainerRegister} />
        <Route path="home-trainer/:trainer" component={HomeTrainer} />
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="add-athlete/:trainer" component={AddAthlete}/>
        <Route path="athletes/:trainer" component={Athletes} />
        <Route path="athletes/:trainer/:athleteId" component={AthleteProfile} />
        <Route path="design-periodization/:trainer" component={DesignPeriodization}/>
        <Route path="periodization/:trainer/:periodizationId" component={Periodization}/>
    </Route>
);

render((
  <Router>{routes}</Router>
), document.getElementById('app'))