webpack反應路由器無法導航子頁面

我正在使用react-router 2.0和webpack。我的app.js中有以下代碼。當我導航到http://localhost:3000/時，我收到了Main頁面。但如果我導航到http://localhost:3000/about我期待about頁面全屏。但我收到一個錯誤，說Cannot GET /about。我應該在webpack配置上做些什麼來允許這些路線？webpack反應路由器無法導航子頁面

import { Router, Route, Link, browserHistory } from 'react-router'; 
ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path="/" component={Main}> 
     <Route path="about" component={About} /> 
     <Route path="help" component={Help} /> 
     </Route>   
    </Router> 
), document.getElementById('app'));

來源

2016-02-17 anivas

上面的代碼似乎是正確的。幾乎與[documentation]（https://github.com/reactjs/react-router）相同。 – Chris

是的，不知道服務器端有什麼問題，不知道怎麼做才能允許這些路由。 – anivas

你是如何實現你的路由器？你有一個'Router.run'的地方嗎？ – Chris

-1

看起來你的服務器沒有準備好處理路由器的URL。您正在使用browserHistory，因此您需要configure your server才能爲您的所有路線網址返回您的index.html。

從文檔：

明示應用可能是這樣的：

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 8080 
const app = express() 

// serve static assets normally 
app.use(express.static(__dirname + '/public')) 

// handle every other route with index.html, which will contain 
// a script tag to your application's JavaScript file(s). 
app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
}) 

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

如果您使用nginx的，使用try_files指令：

server { 
    ... 
    location/{ 
    try_files $uri /index.html; 
    } 
}

來源

2016-02-17 18:15:13 dreyescat

沒有閱讀作者的要求，並且您剛從其他博客文章複製並粘貼解決方案。 – Stevus

我知道你的意思。我也有這個問題，但通過使用瀏覽器同步和connect-history-api-fallback解決了它。

創建一個名爲srcServer.js文件並添加這樣的事情（當然安裝所有需要的依賴）：

// Require Browsersync along with webpack and middleware for it 
import browserSync from 'browser-sync'; 
import webpack from 'webpack'; 
import webpackDevMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import historyApiFallback from 'connect-history-api-fallback'; 

const webpackConfig = { 
    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    noInfo: true, 
    entry: './src/index', 
    target: 'web', 
    output: { 
     path: __dirname + '/dist', 
     publicPath: '', 
     filename: 'bundle.js' 
    }, 
    plugins: [], //[your array of plugins], 
    module: { 
     loaders: [] //[your array of loaders], 
    } 
} 
const bundler = webpack(webpackConfig); 

// Run Browsersync and use middleware for Hot Module Replacement 
browserSync({ 
    server: { 
     baseDir: 'src', 

     middleware: [ 
      historyApiFallback(), // <-- the key to loading a route in the url directly (without navigating to it first) 
      webpackDevMiddleware(bundler, { 
       // Dev middleware can't access config, so we provide publicPath 
       publicPath: webpackConfig.output.publicPath, 
       stats: {colors: true}, 
       noInfo: true 
      }), 
      // bundler should be the same as above 
      webpackHotMiddleware(bundler) 
     ] 
    }, 

    // no need to watch '*.js' here, webpack will take care of it for us, 
    // including full page reloads if HMR won't work 
    files: [ 
     'src/*.html' 
    ] 
});

然後你就可以添加一個NPM腳本到您的package.json，可以說npm run start：

"scripts": { 
    "start": "babel-node srcServer.js", 
    },

這應該成爲你的文件與connect-history-api-fallback這將允許你直接載入和重新載入http://localhost:3000/about

來源

2016-02-21 04:26:48 jakeed1

webpack反應路由器無法導航子頁面

回答

相關問題