路由在 webpack + react 项目中不起作用答案

【问题标题】：Routing not working in a webpack + react project路由在 webpack + react 项目中不起作用
【发布时间】：2021-11-24 21:58:03
【问题描述】：

我正在使用 webpack + React + react-router + typescript 构建一个应用程序，但我被路由卡住了，我有两个路由，默认的 '/' 和 '/test'，不管我做什么只有默认是到达。我做了很多研究，发现很多人有同样的问题，但他们给出的所有解决方案都对我不起作用。

我试过了：

在 webpack.config (https://www.robinwieruch.de/webpack-react-router) 中添加 historyApiFallback: true。
添加公共路径：输出：{ ... publicPath: '/', }
尝试使用如下示例中的代理：How to allow for webpack-dev-server to allow entry points from react-router

我猜是因为我对 wepack 缺乏了解，所以我遗漏了一些东西，有人可以帮忙吗？

这是我的代码：

Webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, 'src', 'index.tsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript',
            ],
          },
        },
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: {
          loader: 'file-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
  ],
  devServer: {
    port: '3000',
    historyApiFallback: true,
  },
};

App.tsx：

import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Dashboard from './pages/dashboard';
import SurveyList from './pages/survey/list';

import messages from './intl/messages';
import { getStoredLanguage } from './intl/languageStorage';

function App() {
  const [appLang, setAppLang] = useState(getStoredLanguage());

  return (
    <IntlProvider
      locale={appLang}
      messages={appLang === 'en' ? messages.en : messages.pt}
    >
      <Router>
        <Link to='/'>Dashboard</Link>
        <br />
        <Link to='/test'>Surveys</Link>
        <Switch>
          <Route path='/'>
            <Dashboard />
          </Route>
          <Route path='/test'>
            <SurveyList />
          </Route>
        </Switch>
      </Router>
    </IntlProvider>
  );
}

index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

我发现问题不在于 webpack，而是主路由中缺少“exact”属性，否则所有其他路由都将与主路由匹配。

<Route exact path='/'>

【讨论】：