Question

我试图使用react router v4。我使用的版本是4.1.1。当页面加载时它会按原样呈现Home组件。但是，如果我导航到localhost:8080/about或localhost:8080/test2，我会在浏览器中找到它

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,
  }
};

Answer 1

尝试将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'
    })
  ]
};

React路由器v4，在路由中找不到

1 个答案: