CODEWITHSUNDEEP
reactjs
Aessandro
Aessandro

Reputation: 5761

React issue with route

I have started to experiment with react following this tutorial: http://courses.reactjsprogram.com/

I have the following code for my route.s

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var hashHistory = ReactRouter.hashHistory;
var Main = require('../components/Main');
var Home = require('../components/Home');
var PromptContainer = require('../containers/PromptContainer');

var routes = (
    <Router history={hashHistory}>
        <Route path='/' component={Main}>
            <IndexRoute component={Home} />
            <Route path='playerOne'            header='Player One' component={PromptContainer} />
            <Route path='playerTwo/:playerOne' header='Player Two' component={PromptContainer} />
        </Route>
    </Router>
);

module.exports = routes;

and PromptContainer.js as follow:

var React = require('react');

var PromptContainer = React.createClass({
    render: function () {
        return (
            <div className="jumbotron col-sm-6 col-sm-offset-3 text-center">
                <h1>{this.props.route.header}</h1>
                <div className="col-sm-12">
                    <form>
                        <div className="form-group">
                            <input
                                className="form-control"
                                placeholder="Github Username"
                                type="text" />
                        </div>
                        <div className="form-group col-sm-4 col-sm-offset-4">
                            <button
                                className="btn btn-block btn-success"
                                type="submit">
                                    Continue
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        )
    } 
});

module.exports = PromptContainer;

index.js:

var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./config/routes');

ReactDOM.render(
    routes,
    document.getElementById('app')
);

when viewed in the browser I get the following error:

index_bundle.js:21001 Warning: [react-router] Location "//playerTwo" did not match any routes

Any help?

Upvotes: 0

Views: 178

Answers (2)

Andrew Cafourek
Andrew Cafourek

Reputation: 431

You have a route defined for /playerTwo/USERNAME but no route defined for just /playerTwo/, thus the error. The code only knows how to handle that URL when it also has the PlayerOne username on the end.

Unfortunately your code doesn't pass the PlayerOne username into the route - to do that, you'll need a few extra functions to handle grabbing the input value and appending it to the URL.

Checkout Video 5 in the React.js Fundamentals course for the step-by-step answer on how to handle it all.

Upvotes: 0

QoP
QoP

Reputation: 28397

You are importing "Route" incorrectly.

this

var Route = ReactRouter.Router;

should be

var Route = ReactRouter.Route;

Upvotes: 1

Related Questions