typescript react中的路由规则设置

5t7ly7z5 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(140)

我正在学习react，我试着在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 />} />} />
              <Route path="myapp1" element={<ProtectedRoute outlet={<MyApp1 />} />}>
                <Route path=":command" element={<ProtectedRoute outlet={<MyApp1 />} />}></Route>
                <Route path=":command/:id" element={<ProtectedRoute outlet={<MyApp1 />} />}></Route>
              </Route>
            </Route>
            <Route path="login" element={<LoginPage />} />
            <Route path="*" element={<Navigate to="/login" />} />
          </Routes>
        </>
  );
}

export default App;

我可以创建这样的类型：

export type AllowedCommands = "new" | "edit";

export type URLParams = {
  command: AllowedCommands;
  id?: string;
};

myapp 1页面：

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

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

对于http：//localhost：3000/myapp 1/* 任何是好的，但我想使命令只允许新的或编辑的规则，如果编辑，它必须提供ID，所以我期望

http：//localhost：3000/myapp1/=>将http：//localhost：3000/myapp1
http：//localhost：3000/myapp1/new/=>将http：//localhost：3000/myapp1/new（which pagePara.command = new）
http：//localhost：3000/myapp 1/edit/1 =>将http：//localhost：3000/myapp 1/edit/1（其中pagePara.command = edit且id =1）
http：//localhost：3000/myapp 1/edit =>将重定向http：//localhost：3000/myapp 1
http：//localhost：3000/myapp 1/wrong =>将重定向http：//localhost：3000/myapp 1

我能知道怎么做吗？

typescript

来源：https://stackoverflow.com/questions/77335946/route-rule-setting-in-react

1条答案

按热度按时间

gudnpqoy1#

React-Router路由要么匹配路径，要么不匹配路径。像"/myapp1/wrong"这样的URL路径将被"/myapp1/:command"匹配，并且MyApp1组件将被呈现。MyApp1组件需要从路由参数中读取command值，并实现自己的验证。
这里有一个简单的验证。

// Set of allowed commands
const AllowedCommands = new Set(["new", "edit"]);

// URL path segments are always string type
export type URLParams = {
  command?: string;
  id?: string;
};

const MyApp1 = () => {
  const { command, id } = useParams<URLParams>();

  // If command is truthy, validate it, otherwise allow UI to render
  return (command ? AllowedCommands.has(command) : true) ? (
    <AppLayout>
      <p>Command 2 : {command}</p>
      {id && <p>ID: {id}</p>}
    </AppLayout>
  ) : (
    <Navigate to="*" replace />
  );
};

由于MyApp1没有呈现Outlet组件，因此不需要呈现任何嵌套路由。使用:command和:id参数渲染单个路由，这些参数列为可选参数（* 自v6.5.0* 起可用）。

<Route
  path="myapp1/:command?/:id?"
  element={<ProtectedRoute outlet={<MyApp1 />} />}
/>

Demo

赞(0）回复(0）举报 2023-10-22

我来回答

typescript react中的路由规则设置

1条答案

Demo

相关问题

热门标签

最新问答