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>

我一直在测试它只是将/dashboard/modules/SomeModName放在URL中，而这总是会破坏。

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

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

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

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

第二次更新 当我从示例中向下拉这个代码时，我能够重新引入错误（在详细视图中刷新时页面中断）。但是，当您克隆整个存储库并按原样运行时，刷新不会中断。是什么影响了这种行为？

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

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

1 个答案: