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反应路由器无法导航子页面

回答

相关问题