I am using react-router-dom 5.3.0. I wanted to try out new hooks approach but I am getting an error saying Uncaught TypeError: useContext(...) is undefined

I have a component BasicRouting as below:

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>;
}

And index.js as follows:

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();

How to solve this error and is this the correct way to use useRouteMatch hook

CodePudding user response：

I think the issue is with useRouteMatch which requires the Router context (which in your case is defined in the same component and therefore not accessible).

Instead of useRouteMatch try the following:

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

Check out the react-router for a more detailed documentation.

CodePudding user response：

As per @matthiasgiger answer I tried some fixes and now my code is working.

Below is the working code

BasicRouting:

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>;
}

index

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();