Question

我正在尝试按照反应教程进行操作。我被困在一个我不断接收路线的部分错误。

我的代码有问题或者这种技术过时了吗？这是我的框架版本：

"babel-preset-es2015": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1"

这是我的路由器代码：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
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' component={PromptContainer} />
            <Route path='/playerTwo/:playerOne' component={PromptContainer} />                        
        </Route>        
    </Router>
);

module.exports = routes;

这是我的PromptContainer：

var React = require('react');

var PromptContainer = React.createClass({
    render: function () {
        return (
            <div className="jumbotron col-sm-6 col-sm-offset-3 text-center">
                <h1>SOME HEADER TEXT</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;

Answer 1

注意：您的网址中包含哈希历史记录，因此下面是您手动重定向到路由的方式

让我们假设基本网址为：

http://localhost:8080/#/?_k=5mjzzn

然后你将重定向到PlayerOne：

http://localhost:8080/#/playerOne/?_k=5mjzzn

注意：如果您使用以下网址：

http://localhost:8080/#/?_k=5mjzzn/playerOne

它会起作用，因为历史是包含的，因此警告在控制台中隐藏

警告：[react-router]位置＆＃34; // playerOne＆＃34;没有匹配任何路线

反应路由器位置“// playerOne”与任何路线都不匹配

1 个答案: