Skip to content

Instantly share code, notes, and snippets.

@jmfurlott
Created March 24, 2015 06:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmfurlott/e723df3110c513be5de9 to your computer and use it in GitHub Desktop.
Save jmfurlott/e723df3110c513be5de9 to your computer and use it in GitHub Desktop.
react-router context issue
import React from 'react';
import { RouteHandler } from 'react-router';
let AppHandler = React.createClass(
render() {
return (
<div>
...
<div>
<RouteHandler />
</div>
</div>
);
},
});
export default AppHandler;
'use strict';
import React from 'react';
let Login = React.createClass({
contextTypes: {
flux: React.PropTypes.object.isRequired,
router: React.PropTypes.func.isRequired,
},
getInitialState() {
return({
username: "joe@example.com",
password: ''
});
},
async onLogin(event) {
event.preventDefault();
this.sessionActions = this.context.flux.getActions('session');
console.log(await this.sessionActions.getToken());
},
onUsernameChange(event) {
this.setState({
username: event.target.value
});
},
onPasswordChange(event) {
this.setState({
password: event.target.value
});
},
render() {
console.log(this.context.router);
return(
<div className="Login">
<h3>Login</h3>
<p>Forgot your password?</p>
<form onSubmit={this.onLogin}>
...
</form>
</div>
);
}
});
export default Login;
import React from 'react';
import { Route, DefaultRoute } from 'react-router';
import AppHandler from './components/AppHandler';
import Login from './components/Session/Login';
import Logout from './components/Session/Logout';
import Dashboard from './components/Dashboard';
let Routes = (
<Route name="app" path="/" handler={AppHandler}>
<Route name="login" path="/login" handler={Login} />
<Route name="logout" path="/logout" handler={Logout} />
<Route name="dashboard" path="/dashboard" handler={Dashboard} />
</Route>
);
export default Routes;
@ryanflorence
Copy link

that's weird ... this works for me with react-router@0.13.1

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

class App extends React.Component {
  render () {
    return (
      <div>
        <h1>Hi</h1>
        <ul>
          <li><Link to="/123">123</Link></li>
          <li><Link to="/456">123</Link></li>
        </ul>
        <RouteHandler/>
      </div>
    );
  }
}

class FooView extends React.Component {
  render () {
    console.log(this.context.router);
    var id = this.context.router.getCurrentParams().id;
    return (
      <div>
        <h2>{id}</h2>
      </div>
    );
  }
}

FooView.contextTypes = {
  router: React.PropTypes.func
};

var Foo = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  render () {
    console.log(this.context.router);
    return <FooView/>;
  }
});

var routes = (
  <Route handler={App}>
    <Route path=":id" handler={Foo}/>
  </Route>
);

Router.run(routes, (Handler) => {
  React.render(<Handler/>, document.body);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment