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> ;,服务器将返回404,因为没有文件在/settings/scripts/main.js中。 愚蠢的我,但为了防止任何人跌倒,我希望这有助于。
我添加了< base href =“/”/>进入< head>的我的index.html和它工作(:
编辑:
自2016年初以来,当您设置< base> ;:时,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: '/' });