react-router-dom 从带有自定义组件和额外路径的路由中获取 id

Question

我有一个应用程序，它使用 react-router-config 并使用包装器组件来重定向未经身份验证的用户。

我有一些功能需要使用路由 /tasks/:id 但我无法访问 :id 值来执行必要的任务查找。

我的路线.js：

import React from "react";
...
const Tasks = React.lazy(() => import("./Components/Tasks"));
...
const routes = [
  {
    path: "/tasks/edit/:id",
    name: "View Task",
    component: Tasks
  }
...
];
export default routes;

然后我有AuthenticatedRoute.js：

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default function AuthenticatedRoute({
  component: C,
  appProps,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        appProps.isAuthenticated ? (
          <C {...props} {...appProps} />
        ) : (
          <Redirect
            to={`/login?redirect=${props.location.pathname}${props.location.search}`}
          />
        )
      }
    />
  );
}

在 App.js 中：

import React, { useState, useEffect } from "react";
import { BrowserRouter, Switch, withRouter } from "react-router-dom";
import AuthenticatedRoute from "./components/AuthenticatedRoute/AuthenticatedRoute";
import routes from "./routes";

function App(props) {
...
  return (
    <BrowserRouter>
      <React.Suspense fallback={loading()}>
        <Switch>
            {routes.map((route, idx) => {
              return route.component ? (
                <AuthenticatedRoute
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  appProps={props}
                  component={props => <route.component {...props} />}
                />
              ) : null;
            })}
        </Switch>
...
      </React.Suspense>
    </BrowserRouter>

最后我有了我的 Tasks.js：

import React, { useState, useEffect } from "react";
...
function Tasks(props) {
  useEffect(() => {
    onLoad();
  }, []);

  const onLoad = async () => {
    console.log(JSON.stringify(props.match.params));
  };
...

浏览到 localhost:3000/tasks/1。props.match.params在链上的每个组件中都是空的。props.match.params.id是undefined。我也试过 match with ，{match.params.id}但在每个组件上也是未定义的。

我可以看到，props.location.pathname但这是完整路径，我必须手动获取最后一段。我无法让它自动:id从 url 中获取 。

编辑 原来我的例子太简单了，这实际上帮助我确定了问题。在我之前的版本中，当我有路线时：

  {
    path: "/tasks/:id",
    name: "View Task",
    component: Tasks
  }

使用useParams我能够获得:id价值，一切实际上都可以正常工作。我在我的应用程序中实际拥有的以及似乎破坏它的是向路径添加了一个额外的目录：

  {
    path: "/tasks/edit/:id",
    name: "View Task",
    component: Tasks
  }

我不确定这有什么不同，但额外的/edit似乎打破了useParams

Answer 1

react-router-dom提供了一些方便的钩子。在你的情况下，我建议useParams()（链接到文档）

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

function MyComponent {
  let { id } = useParams();

  return (<p>{id}</p>);
}

withRouter如果您将使用 React Router 提供的钩子，我也可能会选择不使用