react-router GET/routeできない

Question

ここで問題があります...私は最初の例として流暢に動作する別のアプリケーションを使ってWebアプリケーションのコードを書いています。ここで、ソースコードがある：

（./app.jsx）

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import { Provider } from 'react-redux'; 
    import { createStore, applyMiddleware } from 'redux'; 
    import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

    import App from './components/app'; 
    import Signin from './components/auth/signin'; 
    import reducers from './reducers'; 

    const createStoreWithMiddleware = applyMiddleware()(createStore); 

    ReactDOM.render(
     <Provider store={createStoreWithMiddleware(reducers)}> 
     <Router history={browserHistory}> 
      <Route path='/' component={App}> 
      <Route path='signin' component={Signin} /> 
      </Route> 
     </Router> 
     </Provider>, 
     document.getElementById('app') 
    ); 

（./components/app.js）

import React, { Component } from 'react'; 
    import Header from './header'; 

    export default class App extends Component { 
     render() { 
     return (
      <div> 
      <Header /> 
      {this.props.children} 
      </div> 
     ); 
     } 
    } 

（./components/auth/signing.js ）

import React, { Component } from 'react'; 
    import { reduxForm } from 'redux-form'; 

    class Signin extends Component { 
     handleFormSubmit({ email, password }) { 
     console.log(email, password); 
     } 

     render() { 
     const { handleSubmit, fields: { email, password }} = this.props; 

     return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
      <fieldset className="form-group"> 
       <label>Email</label> 
       <input {...email} className="form-control"/ > 
      </fieldset> 
      <fieldset className="form-group"> 
       <label>Email</label> 
       <input {...password} className="form-control"/ > 
      </fieldset> 
      <button action="submit" className="btn btn-primary">Sign in</button> 
      </form> 
     ); 
     } 
    } 

    export default reduxForm({ 
     form: 'signin', 
     fields: ['email', 'password'] 
    })(Signin); 

（あなたはここに私のリポジトリ全体を見ることができます：https://github.com/LiJuons/react-dribbble）を

私はlocalhost：3000に行きましたが、すべてOKですが、localhost：3000/signinと入力すると、「取得できません/署名します」というエラーメッセージが表示されます。フォームを示しています！ 私のプロジェクトでsignin.jsルートのパスを '/'に設定すると、フォームは問題なくホームディレクトリに表示されるので、問題はルートにあります。

Package.jsonファイルは、作業プロジェクトと私の唯一の違いがあることである

スクリプトのみが異なる開始、両方のプロジェクト（パッケージ、同じバージョンと依存関係の数が同じ）で同じなので、...

鉱山で、それはだ

"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js" 

：

"start": "node server.js" 

PS作業に1 'NPM開始' スクリプトは次のように定義され私は両方のプロジェクトのコードができるだけ均質であることを確認するためにすべての行をチェックしました。

この問題の解決方法を教えてください。

Answer 1

ご使用のサーバーは、おそらくHTML5履歴をサポートするように構成されていません。

が反応-ルータURLを入力するときに動作していないhttps://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd

を見て、手動で

これは一般的な驚きであり、あなたが必要とするアプリケーションにbrowserHistoryを使用しているという事実に関係していますサーバー自体のいくつかの追加構成。基本的には、手動でURLを入力すると、デフォルトでサーバーはそのパスのディスクに格納されているファイルを探します。見つからない場合は404エラーが表示されます。あなたがしたいことは、リクエストをアプリケーションのインデックスに内部的にリダイレクトすることです。

この設定については、react-router v3のドキュメントを参照してください（これは反応ルータ4でも有効です）。一般的な構成です：

特急：

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 8080 
const app = express() 
// this assumes that all your app files 
// `public` directory relative to where your server.js is 
app.use(express.static(__dirname + '/public')) 

app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
}) 

app.listen(port) 
console.log("Server started on port " + port);