React Router v6：通过参数名称获取路由路径

Question

我有一个使用params的动态路径的路由：

<Route
    path="/main/:id"
    element={
        <Page />
    }
/>

当我使用React Router的useLocation到达该页面时，我可以获得完整的路径：

"/main/5432gt34"

有没有一种方法可以检索带有参数名称而不是实际路径的路径？（我要找的输出是：）

"/main/:id"

我希望这是可能的，因为React Router知道路径中的参数，并且您可以使用useParams提取它们。

- sir-haver

---

你能解释一下你的使用情况吗？因为我认为你只有一个组件用于该路由，因此在页面组件中，你总是可以假设路径为“/main/:id”。 - Devon Ray

是的，我有一些路由，例如“/main”，“/main/:id”和“/main/edit”，它们都指向同一个组件，但除了渲染该组件之外，我还想获取一些数据，因此“/main/:id”这样的固定路径名称会对我有所帮助，否则我可以使用正则表达式，但我希望React Router有一种原生干净的解决方案，因为使用正则表达式的缺点是如果我改变路径结构，就需要调整正则表达式函数。 - sir-haver

Answer 1

我认为React Router没有提供这样做的方式，但是如果你想找到一个简单的解决方案，你可以像这样做。

<Route
    path="/main"
    element={
        <Page type="index"/>
    }
/>
<Route
    path="/main/:id"
    element={
        <Page type="id"/>
    }
/>

然后在您的页面组件中处理类型参数。

- Devon Ray

Answer 2

我怀疑这是可能的，但你总可以将其作为属性传递。

<Route
    path="/main/:id"
    element={
        <Page 
            path="/main/:id"
        />
    }
/>

除此之外，这个问题的答案在这里：react-router v6: 获取当前路由的路径模式

- MalwareMoon

Answer 3

如果您知道前缀（您确定路径以“/main”开头，其余部分是动态的，就可以仅使用useParams来完成）：

是的，您可以这样做：

let params = useParams();
useEffect(() => {
  let dynamicPath = "/main";
  Object.keys(params).forEach((key) => {
    dynamicPath += `/:${key}`;
  });
  console.log(dynamicPath);
}, []);

- Amirhossein

Answer 4

解决方案1：您可以使用正则表达式从字符串中提取id。

var location = useLocation();
var myRegexp = /main\/(.*)/;
var id = myRegexp.exec(location.pathname)[1];

正则表达式的简单解释：

• \/ 允许我们匹配 "main/"
• (.*) 将剩余的匹配结果作为返回数组中的第二个结果。

一旦你有了 id，你可以将它存储在 reactContext 中，以便在任何子组件中使用。

解决方案 2：useRouteLoaderData

这个解决方案需要你重构你的路由器，使其成为数据路由器之一，但之后你应该能够做到：

const user = useRouteLoaderData("id");

- IestynGage

---

那只适用于特定情况，op正在寻找更广泛的解决方案。 - MalwareMoon