web-dev-qa-db-ja.com

ReactルーターbrowserHistoryが期待どおりに機能しない

ユーザーとして、深いURLに移動してコンテンツにアクセスしたい

状況

メインページには、「about」ページへのリンクがあります。コンテンツをクリックすると、期待どおりに変更されます。ページがロードされ、URLがlocalhost：8080/aboutに変更されます。

ページを更新すると、エラーが発生します：

/ aboutを取得できません

これが通常の動作なのか、それとも何かを逃したのかしら？

ルート：

var React = require('react');
var ReactRouter = require('react-router');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');

module.exports = (
  <Router history={browserHistory} >
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
)

メイン：

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

module.exports = React.createClass({
  render: function() {
    return <div>
      <div>Header!!</div>
      {this.content()}
    </div>
  },
  content: function() {
    if(this.props.children) {
      return this.props.children
    } else {
      return (
        <div>
          <h1>Main</h1>
          <Link to={'about'}>To about</Link>
        </div>)
    }
  }
});

約：

var React = require('react');
module.exports = React.createClass({
  render: function() {
    return (<div>About</div>)
  }
});

と私 package.json

{
  "name": "react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0 ",
    "gulp-concat": "^2.6.0",
    "gulp-react": "^3.1.0",
    "gulp-sass": "^2.1.1",
    "gulp-server-livereload": "1.6.2",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "node-notifier": "^4.4.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {}
}
react-routerbrowser-history
12
Stefflan00

browserHistoryを使用する場合、すべてのルーティングパスで機能するようにサーバーを適切に構成する必要があります。詳細については、 this を参照してください。

7
taion

同じ問題がありました。上記のように、@ taionの回答は、ルート内のURLでホットリロードを行うようにエクスプレスサーバーを構成する必要があることを示しています。

ただし、ホットリロードを機能させるためだけにエクスプレスサーバーを追加したくない場合は、これを使用してプロジェクトを実行します。

webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors

以前、私はエクスプレスサーバーを設定する必要があるこれだけを使用していました

webpack-dev-server --hot --inline

注：しかし、デプロイする際にはnginx用に設定する必要があると思います。私が言った上記のコマンドは、開発目的のためだけです。 @taionが言ったように this を見ることを忘れないでください。

6
myDoggyWritesCode

Gulp-server-livereloadを使用している場合は、インデックスを指すfallbackプロパティを追加するだけです

gulp.src(['dist'])
  .pipe(livereload({
    livereload: true,
    defaultFile: 'index.html',
    fallback: 'index.html',
    log: 'debug'
  }))
0
Johnny Gabriel