React路由规则配置：限制命令参数并实现条件重定向

要实现你需要的路由访问限制，可通过精确路由匹配+组件参数校验两步完成：

1. 修改app.tsx中的路由配置 #

将原有的动态路由替换为带参数约束的精确路由，并添加兜底重定向规则：

import { Route, Routes, Navigate } from "react-router-dom";
import ProtectedRoute from "./components/protectedRoute";
import { HomePage, AboutPage, LoginPage, TestPage, MyApp1 } from "./pages/_pages";
import Layout from "./components/layout";

function App() {
  return (
        <>
          <Routes>
            <Route path="/" element={<ProtectedRoute outlet={<Layout />} />}>
              <Route index element={<ProtectedRoute outlet={<HomePage />} />} />
              <Route path="about" element={<ProtectedRoute outlet={<AboutPage />} />} />
              {/* 重构myapp1路由规则 */}
              <Route path="myapp1" element={<ProtectedRoute outlet={<MyApp1 />} />}>
                {/* 仅匹配command为new的路径：/myapp1/new */}
                <Route path=":command(new)" element={<ProtectedRoute outlet={<MyApp1 />} />} />
                {/* 仅匹配command为edit且带id的路径：/myapp1/edit/:id */}
                <Route path=":command(edit)/:id" element={<ProtectedRoute outlet={<MyApp1 />} />} />
                {/* 兜底规则：myapp1下所有不符合的路径都重定向到/myapp1 */}
                <Route path="*" element={<Navigate to="/myapp1" replace />} />
              </Route>
            </Route>
            <Route path="login" element={<LoginPage />} />
            <Route path="*" element={<Navigate to="/login" />} />
          </Routes>
        </>
  );
}

export default App;

这里利用了react-router-dom v6的参数正则约束功能，:command(new)表示仅当command参数为new时匹配该路由，:command(edit)/:id则强制edit必须携带id参数。

2. 优化MyApp1组件的参数校验（可选但更健壮） #

虽然路由已经做了拦截，仍可在组件内添加冗余校验，避免异常情况：

import { useParams, Navigate } from "react-router-dom";
import { URLParams, AllowedCommands } from "../Models/interfaces/AppPageParams";

const MyApp1 = () => {
  const pagePara = useParams<URLParams>();
  const command = pagePara.command as AllowedCommands;

  // 校验command是否合法
  if (command && !["new", "edit"].includes(command)) {
    return <Navigate to="/myapp1" replace />;
  }

  // 校验edit命令必须携带id
  if (command === "edit" && !pagePara.id) {
    return <Navigate to="/myapp1" replace />;
  }

  return (
    <AppLayout>
      {command && <p>Command: {command}</p>}
      {pagePara.id && <p>ID: {pagePara.id}</p>}
    </AppLayout>
  );
};
export default MyApp1;

最终实现效果 #

• /myapp1/：正常渲染MyApp1（无参数）
• /myapp1/new：正常渲染MyApp1，pagePara.command为new
• /myapp1/edit/1：正常渲染MyApp1，pagePara.command为edit且id=1
• /myapp1/edit：触发兜底路由，重定向到/myapp1
• /myapp1/wrong：触发兜底路由，重定向到/myapp1

内容的提问来源于stack exchange，提问作者Carrie Kaski