React Router v6 createBrowserRouter非根路由Cannot GET错误求助

问题描述 #

我尝试使用createBrowserRouter创建除根路径"/"之外的新路由，但该路由无法正常工作，访问"/hello"时出现"Cannot GET /hello"错误，请求帮忙指出可能遗漏的配置或问题所在。

相关代码配置 #

index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/", // 该路由正常工作
    element: <App />,
  },
  {
    path: "/hello", // 访问此路由出现"Cannot GET /hello"错误
    element: <div>Hello</div>
  }
])

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

webpack公共配置 #

const path = require('path');

const babelLoaderRule = {
  test: /\.(js|jsx)$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties',
      ]
    }
  }
}

const urlLoaderRule =  {
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'url-loader',
  options: {
    name: '[name].[ext]',
    outputPath: 'images',
    limit: 8192,
  }
}

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: 'js/[name]-bundle-[chunkhash:6].js',
    path: path.resolve(__dirname, '../dist'),
  },
  module: {
    rules: [babelLoaderRule, urlLoaderRule]
  }
};

webpack开发配置 #

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    static: path.join(__dirname, '../dist'),
    port: 3000,
    compress: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      hash: false,
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }),
  ],
  module: {
    rules: [{        
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
        ]
    }]
  }
});

项目启动命令 #

"start": "webpack serve --open --config ./config/webpack.dev.config.js",

问题排查与解决方案 #

1. 未正确挂载路由提供者 #

在index.js中，你已经创建了router实例，但并未通过RouterProvider将其注入到React应用中，而是直接渲染了<App />。React Router需要通过RouterProvider来管理路由上下文，修改后的render代码如下：

ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <React.StrictMode>
      <RouterProvider router={router} /> {/* 替换原有的<App /> */}
    </React.StrictMode>
  )

2. 缺少HTML5 History模式的服务器配置 #

createBrowserRouter使用HTML5 History API来管理路由，当直接访问子路由（如/hello）或刷新页面时，webpack-dev-server会尝试去服务器上请求对应的物理文件，而这些文件并不存在，因此会返回"Cannot GET /hello"错误。需要在webpack开发配置的devServer中添加historyApiFallback: true，让所有请求都重定向到index.html：

devServer: {
  static: path.join(__dirname, '../dist'),
  port: 3000,
  compress: true,
  historyApiFallback: true, // 添加这一行
},

完成以上两处修改后，重启开发服务器，访问/hello即可正常显示内容。

内容的提问来源于stack exchange，提问作者Jun Q