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

现在，在我的设置反应文件，我有以下：

var Settings = React.createClass({
    mixins: [Router.State],render: function() { ... }
});

如果我访问host.local /设置和日志this.getParams()一切正常，文件呈现显示在控制台中的对象{tab：undefined}。但是，一旦我尝试host.local / settings / user – 我期望控制台返回像对象{tab：’user’} – ，整个事情崩溃某处，只是开始抛出未捕获SyntaxError：意外令牌;在控制台。

反应仍然很年轻，因此在许多情况下，错误是相当模糊的。

我遵循在Path Matching Guide提供的规格，它似乎很标准，所以我只能认为它是一个问题与react-router本身或我错过了什么？

更新

tl; dr：这不是与react-router的问题。

长版本：

显然，事实证明问题不是ReactJS既不是React-Router自己。它主要涉及gulp-webserver上的一个错误(我使用它来开发使用代理来连接并行运行的单独的项目)，并且当URL直接在浏览器上键入而不是通过链接访问时触发错误。

我做了一个测试，它的工作正常导航时，但崩溃时直接访问，如this github issue描述，这基本上使我的功能deeplink测试不可行，但应该在生产时工作。

更新2

tl; dr：这不是gulp-webserver的问题。

在我的情况下，它是相对和绝对路径，没有任何问题，前面提到的gulp-webserver。更具体地说，我不得不确保你的脚本和CSS引用是绝对的，所以它不会尝试在你在URL中输入的路径中找到它们。

例如。：

您有两个网址：/ settings和/ settings / account。在这种情况下，如果您的脚本包含在备份文件中，例如< script src =“scripts / main.js”>< / script&gt ;,服务器将返回404，因为没有文件在/settings/scripts/main.js中。愚蠢的我，但为了防止任何人跌倒，我希望这有助于。

感谢您的分析，它帮助我意识到这不是一个问题，React路由器，但我自己的路径。

我添加了< base href =“/”/>进入< head>的我的index.html和它工作(：

编辑：

自2016年初以来，当您设置< base&gt ;:时，React Router会显示警告

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: '/'
});

reactjs – react-router动态段在访问时崩溃

相关推荐