参考官方文档，v6只支持通配符作为可选参数

All of the following are valid route paths in v6:

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

The following RegExp-style route paths are not valid in v6:

/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

目标是实现标签可选功能

准备路由组件

import React from "react";
import {useParams, useSearchParams} from 'react-router-dom';

export const DetailPage: React.FC = () => {
  const [search] = useSearchParams();
  const params = useParams<{label: string; [key: string]: string}>()

  return (
    <>
      <h1>label：{params.label}</h1>
      <h1>tag：{params.tag}</h1>
      <h1>sort：{search.get('sort')}</h1>
    </>
  )
}

路由配置

import React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import styles from './App.module.css';
import {DetailPage} from "./pages";

function App() {
  return (
    <div className={styles.App}>
      <BrowserRouter>
        <Routes>
          第一级路径为 -> "/"
          <Route path={'/'} element={<DetailPage />}>
            第二级路径为 -> "/label"
            <Route path=":label" element={<DetailPage/>}>
              第三级路径为 -> "/label/tag"
              <Route path=":tag" element={<DetailPage />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

测试成功！

1、全参数输入

2、不输入标签

3、不排序