反應路由器v4，在路由中找不到

我正在嘗試使用反應路由器v4。我使用的版本是4.1.1。當頁面加載它呈現Home組件時，它應該如此。但是，如果我瀏覽到localhost:8080/about或localhost:8080/test2，我得到這個在瀏覽器反應路由器v4，在路由中找不到

Cannot GET /about

我App.jsx文件：

import React from 'react'; 
import { BrowserRouter, Route, Link } from 'react-router-dom'; 

import Home from '../components/Home.jsx'; 
import Test from '../components/Test.jsx'; 

const Test2 =() => (
    <div>test2 component</div> 
); 

const App = (props) => (
    <BrowserRouter> 
    <div className="container-fluid"> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={Test} /> 
     <Route path="/test2" render={Test2} /> 
    </div> 
    </BrowserRouter> 
) 
export default App;

的WebPack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './client/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './client/index.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules/'}, 
     { test: /\.jsx$/, loader: 'babel-loader', exclude: '/node_modules/'} 
    ] 
    }, 
    plugins: [HtmlWebpackPluginConfig], 
    devServer: { 
    contentBase: './dist', 
    historyApiFallback: true, 
    } 
};

來源

2017-04-18 Roi

問題在於你的服務器。你使用'webpack-dev-server'還是其他的。顯示相關配置。 – Panther

是的，我已編輯幷包含我的webpack。是的，即時通訊使用webpack-dev-server – Roi

沒有提及'webpack-dev-server'你可以顯示你的package.json如何啓動你的dev服務器嗎？ – Panther

嘗試增加output.publicPath = '/'到你的配置。下面是一個示例webpack配置，下面使用^並修復刷新問題。如果你很好奇「爲什麼」，this將會有所幫助。

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
};

來源

2017-04-18 18:58:58

反應路由器v4，在路由中找不到

回答

相關問題