ReactJS：GET http://localhost:8080/contact 404（未找到）答案

【问题标题】：ReactJS: GET http://localhost:8080/contact 404 (Not Found)ReactJS：GET http://localhost:8080/contact 404（未找到）
【发布时间】：2021-01-26 07:00:13
【问题描述】：

尝试在我的应用程序中使用 BrowserRouter，不知道哪里出错了，但我认为这可能与我的 webpack 有关。最终，当 path='/' 在第一次渲染时，我可以使用任何组件。一旦我尝试使用不同的路径，比如 path='/contact'，我会收到 404 错误。

Webpack.config.js -

const path = require('path');

module.exports = {
    mode: 'development',
    entry: { app: './src/App.jsx' },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/',
    },
        module: {
            rules: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    optimization: {
        splitChunks:{
            name: 'vendor',
            chunks: 'all',
        },
    },
    devtool: 'source-map'
};

App.jsx -

import 'babel-polyfill';
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

// import Page from './Page.jsx';
import About from './About.jsx';
import Contact from './Contact.jsx';

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Route path="/" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </Router>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('content'));

server.js -

let express = require('express');

let app = express();

app.use(express.static('public'));

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

let PORT = process.env.PORT || 8080;

app.listen(PORT, function() {
  console.log(`Server listening on ${PORT}`);
});

而我的文件结构如下

- Root Directory
package.json
webpack.config.js
.gitignore
.env
 -> public
  |-> app.bundle.js
  |-> app.bundle.js.map
  |-> App.js
  |-> index.html
  |-> vendor.bundle.js
  |-> vendor.bundle.js.map
 -> server
  |-> server.js
 -> src
  |-> .babelrc
  |-> About.jsx
  |-> App.jsx
  |-> Contact.jsx

【问题讨论】：

自从我使用 express 已经有一段时间了，但我没有看到为您的 index.html 提供“/contact”路由的后备路由。如果您从react-router-dom 添加Link 以导航到“/contact”而不进行重定向（即转到基本路线，单击链接被带到“/contact”）这将起作用，因为它不会命中服务器，但在“/contact”页面上刷新会再次导致 404。 TLDR：您没有告诉 express 在转到“/contact”时提供 index.html 页面

标签： javascript node.js reactjs express webpack

【解决方案1】：

首先需要导入 Switch 进行路由切换

import { BrowserRouter as Router,Switch, Route } from 'react-router-dom';

然后像下面这样修改返回函数并将“精确”添加到您的路由定义中。

return (
  <Router>
    <Switch>
      <Route path="/" component={About} exact/>
      <Route path="/contact" component={Contact} exact/>
    </Switch>
  </Router>
)

这将在/contact 路由上呈现所需的组件

【讨论】：

感谢您的贡献，但这不起作用。我相信 Jacob Smit 说我没有告诉 express 在转到“/contacts”时提供 index.html 页面可能是正确的，尽管我仍然必须实施这个解决方案。
所以我有一个朋友告诉我，Jacob Smit 对我的错误确实是正确的，一个简单的解决方法是在我的 server.js 文件中实现 app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "../public", "index.html")); }); 。