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

前端之家收集整理的这篇文章主要介绍了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: '/'
});

猜你在找的React相关文章