react-router4 页面刷404

这是路由

import React from 'react'
import { Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import history from '../history/history'

import Login from '../views/login'
import Home from '../views/home'

const Routes = (
  <Router history={history}>
    <Switch>
      <Route path="/" exact component={Login}></Route>
      <Route path="/home" component={Home}></Route>
      <Redirect to="/"></Redirect>
    </Switch>
  </Router>
)

export default Routes

登录页跳转到home页的时候刷新页面404,用的BrowserHistory,下面是node的入口文件app.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const router = require('./routes/router');

const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(router);

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

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(3000, () => {
    console.log('devServer start on port:3000...');
});

这是home页面刷新后无资源

这是webpack的index.js
图片描述

这是devServer
图片描述

搜了一些答案,没有解决

阅读 3.1k
2 个回答

devserver里加上

historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebookincubator/create-react-app/issues/387.
      disableDotRule: true,
    },

webpack.dev.conf.js

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  }

node入口app.js

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

app.get('/*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

解决了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进