Question 73240 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(…)' as it is null – Reactjs

im facing
Uncaught TypeError: Cannot destructure property ‘basename’ of ‘React2.useContext(…)’ as it is null.
in the link component of the code

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import { styles } from '../styles';
import { navLinks } from '../constansts';
import { logo, menu, close } from '../assets';

const Navbar = () => {
  const [active, setActive] = useState('');
  return (
    <nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20     bg-primary`}>
      <div className="w-full flex justify-between items-center max-w-7x1 max-auto">
        <Link
          to="/"
          className="flex items-center gap-2"
          onClick={() => {
            setActive('');
            window.scrollTo(0, 0);
          }}
        >
          <img alt="logo" />
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

i have no idea how to fix it can anyone tell me how to fix it please

Tags:

2

Answers


  1. 0

    You’re using Link from react-router-dom but your app is not wrapped by a BrowserRouter. Your index.js:

    import { BrowserRouter } from 'react-router-dom'

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)
    Login or Signup to reply.
  2. 0

    Be sure to use routing properly on App.js and put the navbar component inside the BrowserRouter. As an example let’s pretend that your app.js looks similar to:

    function App() {
  return (
  <div className="App">
    
    <Router>
      <Routes>
        <Route path="/" element={<HomePage/>}/>
        <Route path="/x" element={<x/>}/>
        <Route path="/y" element={<y/>}/>
        <Route path="/z" element={<z/>}/>
        <Route path="/*" element={<NotFound/>}/>
      </Routes>
    </Router>
  </div>);
}

export default App;

    then:

     function App() {
  return (
  <div className="App">
    
    <Router>
      <Routes>
        <NavBar/>
        <Route path="/" element={<HomePage/>}/>
        <Route path="/x" element={<x/>}/>
        <Route path="/y" element={<y/>}/>
        <Route path="/z" element={<z/>}/>
        <Route path="/*" element={<NotFound/>}/>
      </Routes>
    </Router>
  </div>);
}

export default App;

    Be sure to also add the import!

    edit: before wrapping the routes, I imported BrowserRouter as Router because it helps me to understand the code, that’s why it’s declared like that

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search