react-router無法獲取/路由

好吧，夥計們，這是問題...我一直在使用另一個流暢運行的應用程序爲我的Web應用程序編寫代碼作爲開始的示例。這裏是源代碼：react-router無法獲取/路由

（./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 - 一切正常，但是當我進入本地主機：3000 /登錄 - 我得到錯誤消息，說：「無法獲取/登錄」通過我正在代碼工作正常的應用程序並顯示錶格！問題出在路由上，因爲如果我在項目中將signin.js路由的路徑設置爲'/'，則表單將顯示在主目錄中，沒有任何問題。

的package.json文件是在兩個項目（同一包數，相同的版本和依賴的），只啓動腳本不同的是相同的，所以......

工作項目之間的唯一區別和我是在工作一個 '故宮開始' 腳本定義爲：

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

其中礦是：

"start": "node server.js"

PS我檢查了每一行，以確保兩個項目的代碼儘可能均勻。

任何建議如何解決這個問題？謝謝

來源

2017-07-17 LiJonas

什麼版本的終極版形式您使用的是？如果它的新版本，你的export語句需要改變，我可以爲你提供一些代碼，如果你告訴我你的package.json文件中有什麼版本的redux表單。 –

@DanielZuzevich「redux-form」：「^ 3.1。7「您可以在https://github.com/LiJuons/react-dribbble/blob/master/package.json上看到我的整個軟件包列表 – LiJonas

您是否嘗試將npm start命令更改回其他人員的命令項目嗎？還有，你個人添加的/ signin路由，還是它已經在你從中獲取源代碼的項目中了。我認爲你有一個編譯錯誤，你的bundle.js文件沒有被更新爲具有在你的應用程序中的所有JS代碼都被編譯爲bundle.js，我不認爲它已經更新到了這條路徑 –

您的服務器可能未配置爲支持HTML5歷史記錄。

看看https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd

陣營路由器中輸入URL不工作時手動

這是一種常見的驚喜，你是在你的應用程序，這需要使用browserHistory是相關的事實服務器本身的一些額外配置。基本上，當你手工輸入網址時，默認情況下服務器會查找具有該路徑的文件，存儲在磁盤上 - 如果找不到，它將顯示404錯誤。你想要做的是將請求內部重定向到應用程序的索引。

你可以看到react-router v3關於這個設置的文檔（不用擔心，它仍然適用於react-router 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);

來源

2017-07-18 11:49:30 BTMPL

就是這樣！它現在有效，感謝您的幫助！謝謝！ – LiJonas

react-router無法獲取/路由

回答

相關問題