0

私の目標は、ネストされた URL を次のように定義することです。 /dashboard/modules/12242433

この例を使用してコードをモデル化しました: React Router Examples: dynamic-segments

これが私のルートを定義するrenderメソッドです

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 <

これが私のコンポーネントです。私の理解では、コンプの子をレンダリングしている限り、これは機能するはずです。

ダッシュボード

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

アップデート

私のコードは正しかった（っぽい）ことがわかりましたが、今はさらに混乱しています。このナビゲーションは、クリックによって URL に到達する限り機能します。

<NavLink to="/dashboard/modules/SomeModName">View Mod</NavLink>

URL を入力するだけでテストしてきましたが/dashboard/modules/SomeModName、これは常に壊れるものです。

この URL を両方の方法で機能させる方法はありますか?

2 つ目のバグを見つけましたが、それらは関連していると思います..

リンクをクリックする/dashboard/modulesと正しく読み込まれますが、更新を押すと元のエラーが表示されます。

React Router のどのコア部分を見落としましたか?

2 回目の更新 このコードを例からローカルに取得すると、バグを再導入できます (詳細ビューで更新するとページが壊れます)。ただし、リポジトリ全体を複製してそのまま実行しても、更新は中断されません。この行動に影響を与えるのは何ですか？

React ルーターのマスター詳細の例

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

1 に答える 1

1

以前に同様の問題で質問を投稿しました。publicPathに追加して、後でwebpackセットアップの問題を修正しますoutput。

だからあなたはこのようなものを持っています:

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 });
});
于 2016-06-07T01:35:55.403 に答える