Ale*_*oro 38 reactjs react-router
我有一个看起来像这样的路线配置(只显示我认为可能相关的部分):
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, NotFoundRoute } = Router;
var routes = (
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('application'));
});
现在,在我的Settings react文件中,我有以下内容:
var Settings = React.createClass({
mixins: [Router.State],
render: function() { ... }
});
如果我访问host.local/settings和日志this.getParams()一切正常,文件呈现Object {tab: undefined}在控制台中显示我.但是一旦我尝试host.local/settings/user- 我希望控制台返回类似的东西Object {tab: 'user'}- 整个事情就会崩溃并开始投入Uncaught SyntaxError: Unexpected token <控制台.
React仍然很年轻,因此在许多情况下错误相当模糊.
我遵循路径匹配指南中提供的规范,它看起来非常标准,所以我只能假设它是react-router本身的问题或者我错过了什么？
tl; dr:这不是react-router的问题.
长版:
显然,事实证明问题不在于ReactJS和React-Router本身.它主要涉及gulp-webserver上的一个bug (我用它来开发使用代理来连接并行运行的单独项目),并且当直接在浏览器上输入URL而不是通过链接访问时会触发错误.
我做了一个测试,它在导航时工作正常,但是在这个github问题上直接访问时会崩溃,这基本上使我的功能深层链接测试变得不可行,但是在生产时应该可以工作.
tl; dr:gulp-webserver也不是问题.
对我来说,这是涉及到relative和absolute路径,并不能与一饮而尽,网络服务器的任何问题如前所述.更具体地说,我必须确保您的脚本和CSS引用是绝对的,以便它不会尝试在您在URL中键入的路径中找到它们.
例如:
你有两个网址:/settings和/settings/account.在这种情况下,如果你在回退文件中包含你的脚本<script src="scripts/main.js"></script>,服务器将返回404,因为没有文件/settings/scripts/main.js.
愚蠢的我,但万一其他人为此而堕落,我希望这会有所帮助.
Yan*_*Tay 32
感谢您的分析,它帮助我意识到这不是React Router的问题,而是我自己的路径.
我加入<base href="/" />了<head>我的index.html工作(:
编辑React Router 3:
自2016年初以来,React Router会在您设置时显示警告<base>:
Warning: Automatically setting basename using <base href> is deprecated
and will be removed in the next major release. The semantics of <base href>
are subtly different from basename. Please pass the basename explicitly in the
options to createHistory
最好做这样的事情:
const history = useRouterHistory(createHistory)({
basename: '/'
});
我没有遇到您所看到的错误。看起来你的代码没问题，所以可能是你没有粘贴的东西。
提供信息，我已经根据您的规范构建了一个快速项目，这是我的设置
'use strict';
var React = require('react'),
Router = require('react-router'),
AppHandler = require('./pages/app.js'),
HomeHandler = require('./pages/home.js'),
SettingsHandler = require('./pages/setting.js'),
NotFoundHandler = require('./pages/not-found.js'),
Route = Router.Route,
NotFoundRoute = Router.NotFoundRoute,
DefaultRoute = Router.DefaultRoute,
Routes;
Routes = (
/* jshint ignore:start */
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
/* jshint ignore:end */
);
Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
React.render(<Handler/>, document.body);
});
我跳过了主页，但没有找到，因为这些不是问题，这是我在 settings.js 中的设置
'use strict';
var React = require('react')
Router = require('react-router');
var Setting = React.createClass({
mixins: [Router.State],
componentDidMount: function() {
//console.log(this.getParams());
},
render: function() {
/* jshint ignore:start */
console.log(this.getParams());
return (
<div>this is setting</div>
);
/* jshint ignore:end */
}
});
module.exports = Setting;
希望这些会有所帮助
| 归档时间： |
|
| 查看次数： |
6290 次 |
| 最近记录： |