React Router：定义嵌套参数，似乎是正确的，但给出了无用的错误消息

Question

我的目标是定义一个嵌套的 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 或/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>

我只是通过在 URL 中输入 /dashboard/modules/SomeModName 来测试它，而这总是会中断的。

有没有办法让这个 URL 双向工作？

我发现了第二个错误，我认为它们是相关的..

当我点击将我带到/dashboard/modules 的链接时，它会正确加载，但是当我点击刷新时，它会给我原始错误。

我忽略了 React Router 的哪些核心部分？

第二次更新 当我从示例中本地提取此代码时，我能够重新引入错误（在详细视图中刷新时分页符）。但是，当您克隆整个 repo 并按原样运行时，刷新不会中断。是什么影响了这种行为？

React Router Master-Detail Example

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

Answer 1

我之前发过a question with similar issue。我稍后通过将 publicPath 添加到 output 来解决 webpack 设置的问题。

所以你有这样的东西：

const config = {
  ...
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/',      // try to set up your publicPath correctly
    filename: 'bundle.js'
  },
  ...
};

如果您使用的是快速服务器，请确保捕获所有请求。像这样的：

app.get('/*', (req, res) => {
  res.sendFile('index.html', { root: PUBLIC_DIR });
});