Javascript 反应：得到http://localhost:8080/contact 404（未找到）

尝试在我的应用程序中使用BrowserRouter，我不确定哪里出了问题，但我认为这可能与我的网页有关。最终，在第一次渲染时，当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'));

我的文件结构如下

- 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

---

首先，您需要导入交换机以切换路由

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

路由上呈现所需的组件

我已经有一段时间没有使用express了，但是我没有看到为/contact”路由提供index.html的备用路由。如果您从

react router dom

添加

链接

导航到“/contact”，而不进行重定向（即转到基本路由，单击链接转到“/contact”），这将起作用，因为它不会命中服务器，但刷新“/contact”页面会再次导致404。TLDR：您在转到“/联系”时没有告诉express提供index.html页面，谢谢您的贡献，但这不起作用。我相信Jacob Smit说的可能是正确的，我没有告诉express在进入“/contacts”时提供index.html页面，尽管我仍然需要实现这个解决方案。因此我有一个朋友通知我，Jacob Smit确实对我的错误做出了正确的解释，一个简单的修复方法是实现

app.get（“*”，（req，res）=>{res res sendFile（path.join（uu dirname，“../public”，“index.html”）；}）

在my server.js文件中。

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