React Router：带小数的尾随路径参数不起作用

Question

有人可以解释一下为什么以下路径不适用于 React router 6 (BrowserRouter)

/path/1.1.1

但是下面这个是这样的：

/path/1.1.1/

我的路由配置如下。我正在使用声明性方法，即

useRoutes

钩子来定义路由。

const App = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <h1>Hello World</h1>
    },
    {
      path: '/app/:version',
      element: <AppUI />
    }
  ])
  return (
    <div>
      {routes}
    </div>
  )
}

const root = createRoot(document.querySelector('#app'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

每当我尝试在 Chrom 中点击

/path/1.1.1

时，它都会抛出错误：

Cannot get /path/1.1.1

我的 webpack 配置：

module.exports = {
  entry: './src/index.tsx',
  devtool: 'source-map',
  output: {
    publicPath: '/',
    path: path.join(__dirname, '/build'),
    filename: 'index.[hash].js',
  },
  devServer: {
    host: 'localhost',
    port: 3003,
    open: true,
    historyApiFallback: true,
  },
  module: [...],
  plugins: [...], 
}

令人惊讶的是，它可以在codesandbox上运行：

我在这里缺少什么？

Answer 1

很可能的情况是，

"/path/1.1.1"

被视为从目录

"1.1.1"

请求文件

"/path"

的客户端，而

"/path/1.1.1/"

被视为从目录

"/path/1.1.1"

请求索引文件的客户端。沙箱可能会有点“作弊”，因为您实际上并没有在那里运行服务器。

为了避免“混乱”，我建议将应用程序版本作为搜索参数传递。

示例：

const App = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <h1>Hello World</h1>
    },
    {
      path: '/app',
      element: <AppUI />
    }
  ]);

  return (
    <div>
      {routes}
    </div>
  )
}

假设 URL 路径 + 搜索

"/app?version=1.1.1"

:

import { useSearchParams } from 'react-router-dom';

const AppUI = () => {
  const [searchParams] = useSearchParams();

  const appVersion = searchParams.get("version"); // "1.1.1"

  ...
};

或者以更适合 URL 的格式对版本进行编码，例如将

"."

字符替换为

"_"

下划线字符，转换回在路由组件中使用小数。

console.log("1_1_1".replaceAll("_", "."));

假设 URL 路径 + 搜索

"/app/1_1_1"

:

import { useParams } from 'react-router-dom';

const AppUI = () => {
  const { version } = useParams();

  const appVersion = version.replaceAll("_", ".") // "1.1.1"

  ...
};