部署[react-router]之後「與任何路由不匹配」

我目前正在使用Webpack & npm開發React-Redux應用程序。部署[react-router]之後「與任何路由不匹配」

雖然開發我運行"start": "node server.js"（從我的package.json），然後我的應用程序可以在localhost:3000/myApp到達。

但我想讓這個應用程序可供其他用戶使用。我有一臺運行apache的linux服務器，其中一些以前的jQuery應用程序運行正常。

但是，要綁定我的React應用程序，我運行"production": "webpack -p"，並且輸出結果爲/dist/bundle.js。後來，我創建了一個HTML文件，包括bundle.js上放兩個服務器上

<!DOCTYPE html> 
    <html> 
<head> 
    <title>Urlaub-planer</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--<link rel="stylesheet" href="./Urlaubspalner/css/daterangepicker.css" type="text/css">--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">   </script> 

    <!-- Auth0Lock script --> 
    <script src="//cdn.auth0.com/js/lock-9.0.min.js"></script> 
    </head> 
    <body> 
    <div class="todoapp" id="root"></div> 
     <script src="./bundle.js"></script> 
    </body> 
    </html>

當試圖訪問我得到了以下錯誤：

browser.js?26d3:49Warning: [react-router] Location "/test/index.html" did not match any routes

這是文件，其中我的路由定義

import React from 'react' 
import { render } from 'react-dom' 
import { createStore, applyMiddleware } from 'redux' 
import { Provider } from 'react-redux' 
import {Router, Route, IndexRoute, browserHistory} from 'react-router' 
import createLogger from 'redux-logger' 

import App from './containers/App' 
import VacationSummary from './containers/vacation/VacationSummary' 
import VacationRequest from './containers/vacation/VacationRequest' 
import VacationRequestSummary from './containers/vacation/VacationRequestSummary' 

import Home from './containers/Home' 
import Demo from './components/Demo' 
import rootReducer from './reducers/reducers' 
import thunkMiddleware from 'redux-thunk' 

var injectTapEventPlugin = require("react-tap-event-plugin"); 
injectTapEventPlugin(); 

const logger = createLogger(); 

    let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger) (createStore) 

    let store = createStoreWithMiddleware(rootReducer) 

    let rootElement = document.getElementById('root') 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('./reducers',() => { 
    const nextRootReducer = require('./reducers').default 
    store.replaceReducer(nextRootReducer) 
    }) 
    } 

    render(
    <Provider store={store}> 
     <Router history={browserHistory}> 
     <Route path="/" component={App}> 
     <Route path="Home" component={Home}/> 
     <Route path="VacationSummary" component={VacationSummary}/> 
     <Route path="VacationRequest" component={VacationRequest}/> 
     <Route path="VacationRequestSummary" component= {VacationRequestSummary}/> 
    </Route> 
    </Router> 
    </Provider>, 
    rootElement 
)

我已經發現有這麼幾種問題有類似的目的，但他們大多是有問題，運行的時候日與webpack-dev-server一起使用。我想要它，就像我在傳統的apache服務器上所說的那樣。

爲了使這項工作在我的開發環境之外，我該怎麼做？對不起，如果Q是基本的，但它是我的第一個項目，使用所有這些新的NPM，webpack，節點...東西等。

最後我的package.json

{ 
    "name": "Urlaubsplaner", 
    "version": "0.0.1", 
    "main": "index.js", 
    "scripts": { 
    "server": "node server/server.js", 
     "start": "node server.js", 
     "watch": "webpack --watch", 
     "production": "webpack -p" 
    }, 
    "author": "Auth0", 
    "license": "MIT", 
    "dependencies": { 
    "classnames": "^2.2.5", 
    "css-loader": "^0.23.1", 
     "material-ui": "^0.15.2", 
    "moment": "^2.13.0", 
    "react": "^15.1.0", 
    "react-bootstrap-daterangepicker": "^3.1.0", 
    "react-dom": "*", 
    "react-redux": "*", 
    "react-router": "*", 
     "react-tabs": "^0.7.0", 
     "react-tap-event-plugin": "^1.0.0", 
     "react-yearly-calendar": "^1.1.4", 
    "redux": "*", 
    "redux-form": "^5.2.5", 
    "redux-logger": "^2.6.1", 
     "redux-thunk": "*", 
    "style-loader": "^0.13.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^5.6.18", 
    "babel-loader": "^5.1.4", 
    "babel-plugin-react-transform": "^1.1.0", 
    "express": "^4.13.3", 
    "webpack": "^1.9.11", 
    "webpack-dev-middleware": "^1.2.0", 
    "webpack-hot-middleware": "^2.2.0" 
    } 
    }

而且我webpack.config

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     {test: /\.js$/, 
     loaders: [ 'babel' ], 
     exclude: /node_modules/, 
     include: __dirname 
     }] 
    } 
    }

問候。

來源

2016-08-05 BayLife

根據以下鏈接您當前的反應路由器路徑將工作： -

/
/VacationSummary
/VacationRequest
/VacationRequestSummary

我找不到/測試/home.html路由器中任何地方的路由。所以它肯定會拋出錯誤。您也不需要特定的.html最終的鏈接。

此外，我建議你做/你的/首頁索引路線而不是路線。

現在你是localhost：3000/myApp這個工作，因爲它不應該是因爲你的路由器網址中沒有myApp。

因此，您的主頁（或index.html）應該可以在您上面共享的代碼的localhost：3000中訪問。

來源

2016-08-06 09:31:06

這些頁面可以在localhost：3000上訪問，但是這是通過節點服務器。但我希望它通過一個正常的Apache服務器，這是另一個域上運行。每次在我的服務器上推送一個index.html，其中包含來自/ dist的bundle.js時，它表示不匹配路由 – BayLife

部署[react-router]之後「與任何路由不匹配」

回答

相關問題