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

Posted 2023-02-21

【中文标题】路由在 webpack + react 项目中不起作用

【英文标题】：Routing not working in a webpack + react project

【发布时间】：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')
);

【参考方案1】：

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

<Route exact path='/'>