Uncaught TypeError: useContext(...) is undefined

Question

我正在使用 react-router-dom 5.3.0。我想尝试新的挂钩方法，但我收到一条错误消息 Uncaught TypeError: useContext(...) is undefined

我有一个组件 BasicRouting 如下：

import {React} from "react";
import { BrowserRouter as Router,Link, useRouteMatch} from "react-router-dom";

export default function BasicRouting() {
  let home = useRouteMatch("/");
  let about = useRouteMatch("/about");
  let users = useRouteMatch("/users");
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        {home && <Home match={home}/>}
        {about && <About match={about}/>}
        {users && <Users match={users}/>}
      </div>
      </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

和index.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import BasicRouting from './BasicRouting';

ReactDOM.render(
  <React.StrictMode>
    < BasicRouting/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

如何解决这个错误，这是使用 useRouteMatch hook 的正确方法吗

Answer 1

我认为问题出在 useRouteMatch 上，它需要 Router 上下文（在您的情况下，它是在同一组件中定义的，因此无法访问）。

而不是 useRouteMatch 尝试以下操作：

<Switch>
  <Route path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
</Switch>

查看 react-router 以获得更详细的 documentation。

Answer 2

根据@matthiasgiger 的回答，我尝试了一些修复，现在我的代码可以正常工作了。

下面是工作代码

基本路由：

import {React} from "react";
import { BrowserRouter as Router,Link, useRouteMatch} from "react-router-dom";

export default function BasicRouting() {
  let home = useRouteMatch({
    path: "/",
    exact: true
  });
  let about = useRouteMatch("/about");
  let users = useRouteMatch("/users");
  return (
    
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        
        {about && <About match={about}/>}
        {users && <Users match={users}/>}
        {home && <Home match={home}/>}
      </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

索引

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import BasicRouting from './BasicRouting';
import {BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(
  <React.StrictMode>
    <Router>
    < BasicRouting/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

Uncaught TypeError: useContext(...) is undefined

Uncaught TypeError: useContext(...) is undefined

reactjs

react-router-dom