react-router4 页面刷404

发布于 2022-09-06 10:07:40 字数 1626 浏览 8 评论 0

这是路由

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
图片描述

搜了一些答案,没有解决

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

Spring初心 2022-09-13 10:07:40

devserver里加上

historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebookincubator/create-react-app/issues/387.
      disableDotRule: true,
    },
情归归情 2022-09-13 10:07:40

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'))
})

解决了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文