错误：useParams() 钩子引发错误：TypeError: useContext(...) is undefined

Question

我正在尝试使用 useParams() 反应挂钩来检索参数，但出现此错误：

TypeError: useContext(...) is undefined

这个错误实际上是由 hooks 文件抛出的，特别是这一行（第 40 行）：

/modules/hooks.js:40

 39 | 
> 40 |   const match = useContext(Context).match;
 41 |   return match ? match.params : {};
 42 | }

我的包含路由逻辑的 App.js 文件如下所示：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { ThemeProvider } from "@material-ui/core";
import theme from "./views/config/theme";
import { routes } from "./views/config/routes";
import Header from "./views/components/common/Header";
import Footer from "./views/components/common/Footer";

function App() {
return (
  <div>
    <ThemeProvider theme={theme}>
      <Router>
        <Header />
        <Switch>
          {routes.map((route) => (
            <Route exact path={route.path}>
              {route.component()}
            </Route>
          ))}
        </Switch>
        <Footer />
      </Router>
    </ThemeProvider>
  </div>
);
}

export default App;

包含所有路由的 routes.js 文件如下所示：

import Dashboard from "../pages/Dashboard";
import UserDetails from "../pages/UserDetails";

export const routes: [
{
  name: "Dashboard",
  path: "/dashboard",
  component: Dashboard,
  access: "public",
},
{
  name: "User details",
  path: "/user/:id",
  component: UserDetails,
  access: "private",
},
];

这是我尝试使用 useParams() 挂钩的 UsersDetails 组件文件，它看起来像这样：

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

const UserDetails = () => {
const { id } = useParams();

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

export default UserDetails;  

我正在使用：

NodeJS - 14.17.0

和：

"react": "^17.0.2"
"react-dom": "^17.0.2"
"react-router": "^5.2.0"
"react-router-dom": "^5.2.0"
"react-scripts": "4.0.3"

Answer 1

1.设置路线

首先，在 routes => 中，组件必须用开闭尖括号括起来。例如，我的路线将如下所示：

const routes = [
    {
        name: "Dashboard",
        path: "/dashboard",
        component: <Dashboard />,
        access: "public",
    },
    {
        name: "User details",
        path: "/user/:id",
        component: <UserDetails />,
        access: "private",
    },
];

2。创建两个用于测试的组件

接下来，我创建了两个这样的组件：

const Dashboard = () => {
  return <h2>Dashboard</h2>;
}

const UserDetails = () => {
  let { id } = useParams();
  return <div style={{ fontSize: "50px" }}>
    User Detail {id}
  </div>;
}

3.包装应用组件

在App Component中，我们不需要调用组件函数（route.component()），例如，如下所示：

const App = () => {
  return (
    <Router>
      <div>

        <Header />

        <Switch>
          {routes?.map((route) => <Route path={route.path}>
            {route.component}
          </Route>)}
        </Switch>

      </div>
    </Router>
  );
}