Index.tsx:24 Uncaught Error: useLocation() может использоваться только в контексте компонента <Router>

Я использую использование местоположения, чтобы скрыть панель навигации, если имя пути /admin, /employee, /publisher. но я получил сообщение об ошибке Error: useLocation() may be used only in the context of a <Router> component. Это мой App.js

import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './components/Navbar';


function App() {
  const location = useLocation()

  return (
    <>
      
      <UserState>
      <Router>
      {!["/admin", "/employee", "/publisher"].includes(location.pathname) && <Navbar/>}  //For to hide the navbar if the pathname is /admin, /employee, /publisher
        <Routes onUpdate={() => window.scrollTo(0, 0)}>

          <Route exact path="/" element={<Home />} />
          <Route exact path="/service" element={<Service />} />
          <Route exact path="/contact" element={<Contact />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/reset" element={<Reset />} />
          <Route exact path="/reset/:token" element={<Newpassword />} />
          <Route path="*" element={<NoteFound/>} />

          {/* admin pages */}
          <Route  path="/admin" element={<Admin />}>
          <Route   path="add-project" element={<Addproject />} />
          <Route   path="all-user" element={<AllUser />} />
          </Route>

          {/* Publisher dasboard */}
          <Route  path="/publisher" element={<Publisher />}>
          <Route   path="project-status" element={<ProjectStatus />} />
          <Route  path="allpublise" element={<Allpublise />} />
          </Route>
          
          </Route>
        </Routes>
      </Router>
    </UserState>
    </>
  );
}

export default App;
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
65
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

useLocation() хук используется для извлечения текущего местоположения из маршрутизатора. Для этого нужен контекст маршрутизатора для передачи содержимого местоположения.

Поэтому, если вы хотите использовать этот хук, вам нужно использовать его в одном из вложенных компонентов в <Router> Provider.

В вашей ситуации вам нужно переместить крючок в компонент навигационной панели.

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



function Navbar() {
  const location = useLocation()
  if(["/admin", "/employee", "/publisher"].includes(location.pathname)) 
      return <></> 
  return (
    <>
     I'm a navbar
    </>
  );
}

export default Navbar;
Ответ принят как подходящий

Крюку useLocation (и все остальные react-router-dom крючки) нужен маршрутизатор над в ReactTree, чтобы был доступен контекст маршрутизации.

2 варианта:

  1. Переместите компонент Router вверх по дереву и оберните компонент App, чтобы он мог использовать хук useLocation.

    import { BrowserRouter as Router } from 'react-router-dom';
    
    ...
    
    <Router>
      <App />
    </Router>
    

    ...

    import { Routes, Route, useLocation } from 'react-router-dom';
    import Navbar from './components/Navbar';
    
    
    function App() {
      const location = useLocation();
    
      return (
        <UserState>
          {!["/admin", "/employee", "/publisher"].includes(location.pathname) && <Navbar/>}
          <Routes onUpdate={() => window.scrollTo(0, 0)}>
            <Route path="/" element={<Home />} />
            <Route path="/service" element={<Service />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/login" element={<Login />} />
            <Route path="/reset" element={<Reset />} />
            <Route path="/reset/:token" element={<Newpassword />} />
            <Route path="*" element={<NoteFound/>} />
    
            {/* admin pages */}
            <Route path="/admin" element={<Admin />}>
              <Route path="add-project" element={<Addproject />} />
              <Route path="all-user" element={<AllUser />} />
            </Route>
    
            {/* Publisher dasboard */}
            <Route path="/publisher" element={<Publisher />}>
              <Route path="project-status" element={<ProjectStatus />} />
              <Route path="allpublise" element={<Allpublise />} />
            </Route>
          </Routes>
        </UserState>
      );
    }
    
    export default App;
    
  2. Переместите крючок useLocation вниз по дереву, чтобы он использовался внутри компонента Router.

    import { Routes, Route, useLocation } from 'react-router-dom';
    import Navbar from './components/Navbar';
    
    
    function App() {
      return (
        <UserState>
          <Router>
            <Navbar/>
            <Routes onUpdate={() => window.scrollTo(0, 0)}>
              <Route path="/" element={<Home />} />
              <Route path="/service" element={<Service />} />
              <Route path="/contact" element={<Contact />} />
              <Route path="/login" element={<Login />} />
              <Route path="/reset" element={<Reset />} />
              <Route path="/reset/:token" element={<Newpassword />} />
              <Route path="*" element={<NoteFound/>} />
    
              {/* admin pages */}
              <Route path="/admin" element={<Admin />}>
                <Route path="add-project" element={<Addproject />} />
                <Route path="all-user" element={<AllUser />} />
              </Route>
    
              {/* Publisher dasboard */}
              <Route path="/publisher" element={<Publisher />}>
                <Route path="project-status" element={<ProjectStatus />} />
                <Route path="allpublise" element={<Allpublise />} />
              </Route>
            </Routes>
          </Router>
        </UserState>
      );
    }
    
    export default App;
    

    ...

    const Navbar = () => {
      const location = useLocation();
    
      return !["/admin", "/employee", "/publisher"].includes(location.pathname)
        ? /* Return navbar JSX here */ 
        : null;
    };
    

эй, @DrewReese Большое спасибо! это работает. Я просто заворачиваю <App> using <Router> внутрь index.js. и Напишите панель навигации над <Route> start tag. еще раз спасибо

vinod sharma 24.04.2022 12:37

Другие вопросы по теме