ReactJS：GET http：// localhost：8080 / contact 404未找到

如何解决ReactJS：GET http：// localhost：8080 / contact 404未找到

尝试在我的应用程序中使用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

解决方法

首先，您需要导入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路线上呈现所需的分量