我的目标是定义一个嵌套的 url,如下所示:
/dashboard/modules/12242433
我正在使用这个示例来建模我的代码:React Router Examples: dynamic-segments
这是我的渲染方法,它定义了我的路线
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="dashboard" component={Dashboard}>
<Route path="modules" component={Modules}>
<Route path=":module_id" component={Module} />
</Route>
</Route>
</Route>
</Router>
), document.getElementById('app'));
我可以转到/dashboard
,但是一旦我尝试转到/dashboard/modules
or /dashboard/modules/123232
,我就会收到一条似乎没有多大帮助的错误消息:
bundle.js:2 Uncaught SyntaxError: Unexpected token <
这是我的组件,我的理解是,只要我渲染了 comps 孩子,这应该可以工作。
仪表板
import React from 'react'
export default React.createClass({
render() {
return (
<div>
<p> Hello, Dashboard! </p>
{ this.props.children }
</div>
)
}
})
模块
import React from 'react'
export default React.createClass({
render() {
return (
<div>
<p> Hello, Modules! </p>
{ this.props.children }
</div>
)
}
})
模块
import React from 'react'
export default React.createClass({
render() {
return (
<div>
<p> Hello, Single Module! </p>
</div>
)
}
})
更新
事实证明我的代码是正确的(ish),但现在我更加困惑了。只要您通过单击到达某个 URL,此导航就可以工作:
<NavLink to="/dashboard/modules/SomeModName">View Mod</NavLink>
我一直在简单地通过/dashboard/modules/SomeModName
输入 URL 来测试它,而这总是会中断的。
有没有办法让这个 URL 双向工作?
我发现了第二个错误,我认为它们是相关的..
当我单击将我带到/dashboard/modules
它的链接时,它会正确加载,但是当我点击刷新时,它会给我原始错误。
我忽略了 React Router 的哪些核心部分?
第二次更新 当我从示例中本地提取此代码时,我能够重新引入错误(在详细视图中刷新时分页符)。但是,当您克隆整个 repo 并按原样运行时,刷新不会中断。是什么影响了这种行为?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'client'),
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react', 'react-hmre']
}
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
}
};