react-router 动态段在访问时崩溃 [英] react-router dynamic segments crash when accessed
问题描述
我的路由配置如下所示(仅显示我认为可能相关的部分):
I have a route configuration that looks like this (showing only the parts that I think may be relevant):
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'));
});
现在，在我的设置反应文件中，我有以下内容:
Now, on my Settings react file, I have the following:
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 <.
If I access the host.local/settings and log this.getParams() everything works fine and the file renders showing me Object {tab: undefined} in the console. But as soon as I try host.local/settings/user - where I expected the console to return something like Object {tab: 'user'} -, the whole thing crashes somewhere and just starts throwing Uncaught SyntaxError: Unexpected token < in the console.
React 还很年轻，因此在许多情况下错误相当模糊.
React is still young and therefore the errors are rather vague in many situations.
我遵循了 路径匹配指南 并且它看起来很标准，所以我只能假设这是 react-router 本身的问题还是我遗漏了什么?
I've followed the specifications provided on the Path Matching Guide and it seems pretty standard, so I can only assume it's a problem with react-router itself or am I missing something?
tl;dr:反应路由器没有问题.
tl;dr: It's not a problem with react-router.
长版:
显然，问题不在于 ReactJS，也不在于 React-Router 本身.它主要涉及 gulp-webserver 上的一个错误(我使用它来开发使用代理连接并行运行的单独项目)并在直接在浏览器上输入 URL 而不是被访问时触发错误通过链接.
Apparently, it turns out the issue is not on ReactJS neither React-Router themselves. It involves mostly a bug on gulp-webserver (which I'm using for developing using proxies to connect separate projects running in parallel) and triggers an error when URLs are typed directly on the browser instead of being accessed through a link.
我做了一个测试，它在导航时工作正常，但如 这个 github 问题，这基本上使我的功能性深度链接测试不可行，但在生产中应该可以工作.
I did a test and it works fine when navigating, but crashes when accessed directly as described on this github issue, which basically renders my functional deeplink tests unviable, but should work when in production.
tl;dr:gulp-webserver 也不是问题.
tl;dr: It's not a problem with gulp-webserver either.
就我而言，它与 relative 和 absolute 路径有关，并且与之前提到的 gulp-webserver 没有任何问题.更具体地说，我必须确保你的脚本和 CSS 引用是绝对的，这样它就不会试图在你输入 URL 的路径中找到它们.
In my case, it was related to relative and absolute paths and not any issue with gulp-webserver as mentioned before. To be more specific, I had to make sure your script and CSS references were absolute so that it doesn't try to find them in the path you're typing in the URL.
例如:
您有两个 URL:/settings 和 /settings/account.在这种情况下，如果您在回退文件中包含的脚本类似于 <script src="scripts/main.js"></script>，服务器将返回一个404，因为 /settings/scripts/main.js 中没有文件.
You have two URLs: /settings and /settings/account. In that case, if you have your script inclusion in the fallback file being something like <script src="scripts/main.js"></script>, the server will return a 404 for it, since there's no file in /settings/scripts/main.js.
我是愚蠢的，但如果其他人也因此而堕落，我希望这会有所帮助.
Dumb of me, but in case anyone else falls for that, I hope this helps.
推荐答案
感谢您的分析，它帮助我意识到这不是 React Router 的问题，而是我自己的路径.
Thanks for your analysis, it helped me to realize it wasn't an issue with React Router but my own paths.
我将 <base href="/"/> 添加到我的 index.html 的 中，然后它工作(:
I added <base href="/" /> into the <head> of my index.html and it worked (:
针对 React Router 3 进行
从 2016 年初开始，当你设置
Since early 2016, React Router will show a warning when you set <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: '/'
});
这篇关于react-router 动态段在访问时崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
