回复路线

Question

我已经开始尝试按照本教程进行反应：http://courses.reactjsprogram.com/

我的路线有以下代码。

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;

和PromptContainer.js如下：

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')
);

在浏览器中查看时出现以下错误：

index_bundle.js：21001警告：[react-router]位置“// playerTwo”与任何路线都不匹配

任何帮助？

Answer 1

您输入的“路线”不正确。

此

var Route = ReactRouter.Router;

应该是

var Route = ReactRouter.Route;

Answer 2

您为/playerTwo/USERNAME定义了一条路线，但没有为/playerTwo/定义路线，因此错误。代码只知道如果在最后还有PlayerOne用户名时处理该URL。

不幸的是，您的代码没有将PlayerOne用户名传递给路线 - 为此，您需要一些额外的功能来处理抓取输入值并将其附加到URL。

结帐Video 5 in the React.js Fundamentals course了解如何处理所有内容的分步回答。